Question

如何使用chrome 调试工具

Answer 1

在浏览器窗口，按F12键即可打开如下图的调试窗口。

调试窗口的上方是一行tab，上面每个选项都有各自不同的功能。

上图中搜索图标（第一个圈）是定位页面元素的。第二个手机图标是适配移动设备的。

第一个选项Elements是用来定位页面元素的html原代码，在左下方可以使用Ctrl+F搜索元素或是字符串，来定位元素。

第二个选项Network，是用来跟踪页面请求的，从这里可以看到页面发出的所有的请求信息，包括地址、用时、返回值等。第三个选项是Source，这里可以看到当前页面的原代码，包括Javascript和CSS等。后面的4个选项，用的很少，一般在开发中不使用。

最后一个选项Console，是用来输出一些调试信息。在下图中，可以看到在Console中会打印出当前页面中出现的错误，也可以在Console中打印页面中参数，还可以在Console中定义方法，并执行方法。Console是开发者使用最多的调试工具。

在调试工具的右上角有一些选项，通常会使用到设置和切换卡这两个选项。打开设置，可以对调试工具进行设置，在不是必须得情况下，不用做任何修改。点击切换卡，调试工具会在新打开的窗口中显示。