WEB浏览器中开发者工具的几个技巧

浏览器的开发者工具

在浏览器的正文中点右键，或者在浏览器的菜单里面，更多工具，可以很容易的找到开发者工具，当然，你也可以使用F12直接调出这个工具组。

什么是开发者工具

用来调试HTML，js等web内容的工具，就是开发者工具，我们可以通过开发者工具看到web页面的HTML，JS，以及浏览器的网络请求，CSS样式，内存使用等。

调试HTML和CSS

在Element选项卡中，可以看到当前的HTML，鼠标在HTML标签中移动，可以看到左侧对应的标签被选中，同时会显示他的content范围，padding范围，margin范围，在我们双击标签的时候，是可以对他进行修改的，右键有编辑HTML的选项。

通常，选择一个HTML元素之后，我们可以看到他的css样式，这些样式一侧有一个复选框，点击它可以打开或者关闭这个属性，然后能够在左侧立即观察到效果。

某些元素具有类似hover这类的特殊的选择器，这个时候，我们可以点击需要查看的元素，然后对他右键，就会得到这样的菜单：

只需要在Force state中选择就可以固定页面的元素为某种状态，以对css进行Debug。

这个是Copy菜单，可以对元素进行整体复制，获取XPath（做爬虫或者分析页面就可以通过XPath直接得到对应的元素）或者选择器。

第一个是指针工具，可以在左侧页面选中HTML元素，此时右侧会选中他的代码，很方便，第二个是手机模式，浏览器会模拟手机访问的效果，如果使用了响应式的前端框架，那么它就可以很方便的查看页面在手机端的表现。

调试JS

Element旁边的选项卡就是Console，控制台。

控制台会有Javascript打印的log，或者报错信息，同样，控制台下面是可以输入的，它能够直接执行javascript片段。

目前PC端浏览器对javascript的支持十分良好，已经可以原生使用ES6了。

但是如果需要在浏览器（HTML中）使用ES6，需要将script标签的type属性设置为module。浏览器已经可以支持包括import、export、fetch等在内的多数ES6特性了。

javascript经常会发起ajax请求，如果需要知道是那个位置的js发起了请求，那么我们可以勾选Log XML HttpRequest，然后就可以得到这样的log：

从这里的输出就可以找到请求发起的位置。

在控制台旁边的，是JS的调试器，它能够做到js的断点调试。

文件目录：就是这个web页面正在工作的时候使用的一些HTML，js，css等资源的目录，可以在这里查找想要调试的源代码。

文件目录旁边的是行号，可以在上面下断点，程序运行到断点会停下来。

然后是源码正文，在调试的时候，可以用鼠标圈选需要查看的变量等，可以看到此时具体的值。
最下面是调试工具。从左到右依次是：暂停/继续，单步跳过，单步进入，单步跳出，单步执行，禁用断点，最后一个我没用过。

那个行号上面的蓝色部位就是断点的标记，在断点命中后，js将会暂停执行，这个时候的调试页面就会像现在这样，左侧是调用栈，右侧的scope选项卡会出现当前的局部变量和全局变量，可以在这里进行观察，局部变量上方还有watch选项卡，我们可以在这里编写一些表达式，用来方便观察和调试。

鼠标移到变量上方，会弹出一个悬浮窗，并且显示变量此刻的内容，如果需要查看表达式或者变量调用方法或者变量的成员，那么可以使用鼠标圈选它，然后移到选定内容的上方，此时会出现和上图一样的悬浮窗，显示圈选部分的内容，就像这样：

(待续…）