浏览器调试

一.有关Sources

     1.最原始的方法是用 alert() 在页面上打印内容，稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。

Sources Panel 的左边是内容源，包括页面中的各种资源。其中，又分 Sources 和 Content scripts。

     2.Sources就是页面本身包含的各种资源，它是按照页面中出现的域来组织的，这是我们要关注的。异步加载的 js 文件，在加载后也会出现在这里的。

     3.Contentscripts 是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这类扩展实际也是嵌入在页面中的资源，它们也可以读写DOM。

条件断点：在断点位置的右键菜单中选择“EditBreakpoint...”可以设置触发断点的条件，就是写一个表达式，表达式为 true 时才触发断点。

   执行选择的代码

在断点调试时，可以用鼠标选择想要查看的变量或表达式，然后右键菜单执行“Evaluate in Console”，就可以看到该表达式的当前的值了。

 

二.临时修改JavaScript 代码

通常我们在调试代码时习惯：修改代码→刷新页面→重新检查，这么一个循环。但其实 Chrome 中可以临时修改 JS 文件中的内容，保存（Ctrl+S）就可以立即生效，结合 Console 等功能就可以立即重新调试了。但注意这个修改是临时的，刷新页面修改就没了。

 

 

三.在 DOM 元素上设置断点

 

如图所见，在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点：

l 子节点修改

l 自身属性修改

l 自身节点被删除

l 选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来，

4.XHR 断点

右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

5.按事件类型触发断点

右侧调试区的 Event Listener 列表，这里列出了各种可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断。

6.格式化代码（Pretty Print）

四.添加、启用和停用 CSS 类(Elements)

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作：

·        启用或停用当前与元素关联的类。

·        向元素添加新类。

 

·        在 Elements 面板内右键点击某个元素，然后从菜单中选择目标伪类，将其启用或停用。 

·        在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器。

 

 

 

五.向样式规则添加背景色或颜色

Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。

样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标

 

 

 

 

 

点击 Filter 按钮 () 可以过滤控制台输出。您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

 

按严重性等级进行过滤的说明如下所示：

六.查看单个资源的详细信息.（NETWORK）

点击资源名称（位于 RequestsTable 的 Name 列下）可以查看与该资源有关的更多信息。

可用标签会因您所选择资源类型的不同而不同，但下面四个标签最常见：

·        Headers。与资源关联的 HTTP 标头。

·        Preview。JSON、图像和文本资源的预览。

·        Response。HTTP 响应数据（如果存在）。

·        Timing。资源请求生命周期的精细分解。