F12开发者工具分析：js的DeBug调试、Network详解，Eclipse/STS的DeBug调试

一 F12开发者工具分析

1、概述

概述： 是一个浏览器自带的开发调试工具，因为可以用F12快捷键直接启动，所以简称为F12工具。

特点：

1. 简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。
2. F12作为浏览器的一部分，是数据收发的一端，抓取到的HTTPS报文是可以得到明文数据的。

2、如何调出开发者工具

1. F12 键 (笔记本电脑 Fn + F12)
2. 右键选择 ---- 检查(N)
3. 页面右上角----更多工具----开发者工具
4. 快捷键 Ctrl + Shift + i

3、常用设置

3.1、显示位置的调整

3.2、设置语言和颜色

显示为中文效果：

3.3、手机版本的切换

4、模块分析

4.1、中英文对照

4.2、常用的5个功能模块

1.3 Elements（元素）

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

点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入 选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

1.3.1 查看元素的属性：

定位到元素的源代码之后，可以从源代码中读出改元素的属性。

1.3.2 修改元素的代码与属性

点击元素，然查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

1.4 Console（控制台）

1.4.1 查看 JS 对象及其属性

1.4.2 执行 JS 语句

• 换行：shift+Enter
• 执行输出结果：Enter

1.4.3 查看控制台日志

当网页的 JS 代码中使用了 console.log() 函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉

在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。

1.5 Sources（源代码）

1.5.1 查看源文件

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

1.5.2 js的DeBug调试

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

中断调试:
添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时会中断），此时可以将光标放在变量上查看变量的值。

也可以在右边的侧栏上查看：

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

注意:要刷新网页。

1.6 Network（网络）

1.6.1、Network下的模块信息

英文：

中文对照：

1.6.2、请求下的模块信息

1.7 F12 的妙用

1.7.1 复制不可复制的文字

有些文章设置了不可复制，那么如果想复制文字时，

按下 F12，或者右击鼠标选择【审查元素】，点一下下边弹出框左上角鼠标，然后去点击页面你想要的文字，下面框代码中亮的部分，看不到文字就点击箭头展开，看到文字，双击或者右键 copy

1.7.2 下载不能保存的图片

例子（比如说某库网需要 vip 才能下载的图片）

首先我们打开不能直接下载图片的网站，然后使用快捷键 F12，或者右击鼠标选择【审查元素】-> 看到对应的 img 选择 src 右键点击 open in new web

或者选择【 network】，再选择【 Img】,刷新页面就看得到下面有图片资源了，大部分网页是这样结构，有些图片会在【 sources】那里打开左侧栏（请求回来的图片资源），总之能找到图片的资源所在位置就可以了。

1.7.3 截取整个网页

使用浏览器自带的截屏功能截取超过一个屏幕的网页

F12 或 Ctrl+ Shift+ I 打开开发者工具，在任意 tab 上按 Ctrl+ Shift+ P，在弹出的输入框里输入 Capture full size screenshot（其实不需要输入完整，可以自动补全），然后按回车即可

1.7.4 编辑页面上的任何文本

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on’就可以实现对网页的编辑了。

二、Eclipse/STS的DeBug调试

2.1 添加断点

2.2 执行DeBug

和运行普通程序一样有2种：

1. 点击图标
2. 选中main方法名(这一步可以省略)–右键— Run As—java Application

举例说明：

执行后程序会定位到第一个Debug断点的位置:

F6单步执行，不会进入到方法。
F5单步执行，会进入到方法。
总结：如何选择进入不进入方法，由自己判断，想要查看方法内部便F5进入，不想进入便F6。

进入方法内部同样可以F6一步步执行：

查看对应的输出值:

点击F7回到上一步操作:

2.3 常用操作

功能	快捷键	描述
step into	F5	单步进入(如果有方法调用，将进入调用方法中进行调试)
Step Over	F6	单步跳过(不进入行的任何方法调用中，直接执行完当前代码行，并跳到下一行)
Step Return	F7	单步返回(执行完当前方法，并从调用栈中弹出当前方法，返回当前方法被调用处)
Resume	F8	执行完当前行所在断点的所有代码，进入下一个断点，如果没有就结束
drop to frame	无	回到当前行所在方法的第一行
Terminate 终止	Ctrl+F2	停止 JVM, 后面的程序不会再执行

2.4 DeBug失效解决