使用开发者工具

F12
右键检查
crtl+shift+i

模块使用

主要四个模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）[1]。

元素

查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等

控制台

查看js对象及其属性
执行js语句
查看控制台日志

当网页的 JS 代码中使用了 console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉
在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。

源代码

查看源文件
添加断点
中断调试

网络

在前后端分离的情况下，常常使用fetch和XHR（XMLHttpRequest）来进行远距离的数据传输[2]，可以使用fetcn/XHR模块来查看接口动作.

fetch和XHR都是是获取远端数据的方式。 fetch是原生js方法，没有使用XMLHttpRequest对象，使用fetch可以不用引用http的类库即可实现。提供了一种简单，合理的方式来跨网络异步获取资源。 XMLHttpRequest（XHR）是一个构造函数，对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL。即允许网页在不影响用户操作的情况下，更新页面的局部内容。可以用于获取任何类型的数据。