一、调用

• F12 键 (笔记本电脑 Fn + F12)
• 右键选择 检查(N)
• 快捷键 Ctrl + Shift + i

二、介绍

元素（Elements）、控制台（Console）、源代码（Sources）、网络（Network）

1.元素

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

查看元素代码：点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，定位到源代码后，可以从源代码中读出元素属性

修改：编辑元素代码、修改属性，仅对当前页面渲染生效，不会修改服务器的源代码，常用于调试页面效果使用。

断点（Break on）：选中之后，当元素被修改，页面加载会暂停，然后可以查看该元素的属性，断点可以在右侧DOM Breakpoints页面查询所有元素断点。

监听（Event Listener）：查询该元素对应事件，定位该事件函数的JS文件和具体位置。

2.Console（控制台）

查看JS对象和属性、执行JS语句

查看控制台日志：当网页JS代码使用console.log()函数时，该函数输出的日志信息会在控制台显示，日志信息用语开发调试，上线后会去掉该函数。

测试界面如果出现Bug问题时，查看调试日志信息或异常错误信息，由前端工程师具体调试。

3.Sources（源代码）

在源代码（Source）页面可以查看到当前网页的所有源文件 包括：样式、CSS、图片、JS文件等。在左侧栏中可以看到源文件以树结构进行展示。

添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择 Edit breakpoint 可以给该断的添加中断条件。

中断调试：添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量，也可继续运行、单步跳过、单点调试等

4.Network（网络）

URL、响应状态码、响应数据类型、响应数据大小、响应时间、请求耗时

三、应用

刷课、复制图片文字、 编辑文本：在控制台输入

document.body.contentEditable="true"
document.designMode = 'on'  #两句意思一样

就可以实现对网页的编辑了 截屏：使用浏览器自带的截屏功能截取超过一个屏幕的网页，截屏：F12 或 Ctrl+ Shift+ I 打开开发者工具，在任意 tab 上按 Ctrl+ Shift+ P，在弹出的输入框里输入 Capture full size screenshot（其实不需要输入完整，可以自动补全），然后按回车即可 ……