调试工具的使用

开发怎么能离开调试工具，感谢浏览器的开发者调试工具，不墨迹来了。

1.F12调试

1、打开开发者调试工具
通过以下方式打开开发者调试工具：
① 在网页上右键选择“检查”
② 快捷键 F12
③ Ctrl+shift+i
④ 找到浏览器右上角的三个点，找到更多工具，然后选择开发者工具
开发者调试工具打开后的，如图：

2.导航条部分功能使用

①快速找到页面中某个节点，利用导航条最左端的小图标点击后变成蓝色，在界面的左侧就是“页面显示部分”鼠标停留的部分会变成高亮，点击时“调试工具显示部分”会显示被点击的节点的dom元素会高亮显示以及显示样式，如图:

过开发者调试工具可以模拟移动端的界面，找到导航条中选中元素图标右边的矩形叠加小图标，点击，页面显示部分显示移动端的样式，如图：

③ 在①的图中看到开发者调试工具的页面看到是在右侧，在导航条部门找到三个点（不是浏览器的点），在弹出框部门选择模式，如图：

当前是在右侧，第一个是调试工具界面与页面显示部分分离出来。

3.Elements的使用

在导航条中选择Elements，在标号为1的区域显示dom树结构，2区域显示样式，3为盒子模型，最中间显示的是左侧页面显示部分高亮元素的宽和高，绿色部分是pading的值，其次黄色是border和橙色是margin。

在标号为2的区域中elements.style添加样式，可以在线调试样式，在该处添加样式会直接添加到行内样式中，所以优先级最高，如果在文件中已经定义了样式，不生效，在此处添加生效，那就要需要查看在页面中添加样式的优先级问题了。

还可以通过Elements下载图片，找到图片的对应的节点，鼠标悬在图片节点上，会显示该图片，如下图，在图片的地址位置右键，在弹出的菜单选项中选择open in new tabs这样该图片显示new一个新的窗口页，即可下载

4.console的使用

通常情况下我们想要打印一些信息就在页面中写console.log(data)等显示在此处，除此之外，也可以查看一些基础的知识或者演示一些代码，如：

返回了window下的所有属性，或者知识演示一些代码，如图:

熟知的是console.log()打印一般的日志，还有console.error()显示带有红色小图标的红色错误信息，console.warn()显示带有黄色小图标的警告信息。如图：

5.Sources的使用

可以在这个面板显示当前项目的结构，选择一个项目可以进行调试js代码，如图:

左侧显示项目的结构，我们通过该面板本地的js代码，也可以调试远程的js代码，可以通过选择文件的名字打开文件或者用面板中间部分提示的快捷键打开文件，打开 一个文件，在面板的中间部分，显示全部文件信息，可以通过点击在js部分每行前边的序号添加断点，如图：

刷新页面后：

在执行第一个断点的方法时，页面显示部分如上图左侧显示，右侧画框的部分显示全部的断点，在一个断点的时候，可以通过查看变量的值，如;

将鼠标悬在左侧红色的框内，则会显示该变量的值，也可以通过在右侧的watch里添加需要监听的变量，点击加号，输入需要观察的变量名称后回车，即添加成功，若该变量实时变化watch中的变量也会实时变化，也可以添加多个需要监听的变量。同样也可以通过在source面板中添加自己的debugger代码。
在面板的右上角

有这样的几个小图标，分别是:
第1个：放行，停止该行代码的调试
第2个：不跳入函数中去，继续执行下一行代码（F10）
第3个：跳入函数中去（F11）
第4个：从执行的函数中跳出
第5个：禁用所有的断点，不做任何调试
第6个：程序运行时遇到异常时是否中断的开关

6.Network的使用

在进行向接口请求数据或者提交数据的时候，需要使用到network面板，如：

目前network监听全部的请求，在面板左侧选择要查看的接口，点击后，可以看到面板右侧Headers的内容，包括一些请求地址、http请求状态，请求头以及传递的参数，提交数据的时候避免是出错要认真核对，切换选项卡到preview，查看接口返回的数据，如图：

在这里师父交了一个大招，就是在监听media类型的时候，点击qq或者网易云音乐的音乐文件时候，在请求列表会显示请求的音乐，open in new tabs后既可以下载音乐了，再也不用买会员啦。

##7.Application的使用
在Application可以查看存在浏览器中的全局信息，如图：

用到最多的就是左侧红色圈住的部分，当前查看的是存在localstorage中的信息，如上图的右侧，无论是哪一种存储机制，都是键值对的形式。

8.附加插件的使用

项目开发使用vue框架，在chrome扩展插件中安装vue插件何乐而不为呢。首先利用蓝灯翻墙，然后在chrome的应用中搜索vue，如图：

并选择添加，添加成功后，刷新浏览器，会在导航条部分出现Vue
切换了，切换到vue面板中，如图：

在面板左侧显示，当前页面中所有的组件，便是App.vue根组件，所有的组件都渲染在根组件的中，展开的箭头，会看到app下所有组件的名称，选择一个组件查看，可以查看到右侧的该组件的信息。也可以切换查看该组件的企业信息，比如Vuex状态管理器中的数据或者查看组件都执行了哪些事件，使vue的开发更加方便。