浏览器开发者模式的使用

1.如何调出开发者工具 按F12调出 右键检查（或快捷键Ctrl+Shift+i）调出

2.开发者工具初步介绍 chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

• 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面

• 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入”console”并执行~

• 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

• 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

2.1元素（Elements） 查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。

• 当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在Properties中查看：
• 修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
• 查看元素的CSS属性：在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得非常方便
• 修改元素的CSS属性：在元素的Styles页面，可以对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页面展示生效，不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。
• 给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性
• 元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。
• 查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数），大大提高开发维护的效率。

控制台（Console）

• 查看JS对象的及其属性：

源代码（Source）

• 查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
• 添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
• 中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的
• 也可以在右边的侧栏上查看：
• 在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

Network详细介绍 那我就按照从左到右的顺序来写啦~

• 记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。

• 清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）

• 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。

• 过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。 也可以是一些指定条件 指定条件有哪些？

• domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

• has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

• is：当前时间点在执行的请求。当前可用值：running

• larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

• method：使用何种HTTP请求方式。如 GET

• mime-type：也写作content-type，是资源类型的标识符。如 text/html

• scheme：协议规定。如 HTTPS

• set-cookie-name：服务器设置的cookies名称

• set-cookie-value：服务器设置的cookies的值

• set-cookie-domain：服务器设置的cookies的域

• status-code：HTTP响应头的状态码

• 显示详细信息

• 显示时间流 能够根据时间，查看对应时间下 浏览器请求的资源信息

• Preserve log :是否保留日志

当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~

• Disable cache:是否进行缓存

当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。

Network主题内容介绍

• Name/Pat：资源名称以及URL路径 （main.css）

• Method：Http请求方法 (GET或者POST)

• status/Text：Http状态码/文字解释 （200，ok）

• Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

• Initiator：解释请求是怎么发起的，有四种可能的值

   1.Parser  ：请求是由页面的html解析时发送
   2.Redirect：请求是由页面重定向发送
   3.script  ：请求是由script脚本处理发送
   4.other   ：请求是由其他过程发送的，比如页面里的Link链接点击

• size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小 请求文件具体说明 点击某个具体请求后的界面，如下图所示：
• Headers Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
• Preview：预览面板，用于资源的预览。
• Response：响应信息面板包含资源还未进行格式处理的内容
• Timing：资源请求的详细信息花费时间

细节补充 对某请求右键，出现页面如下图所示。

• Copy Request Headers：复制HTTP请求头到系统剪贴板

• Copy Response Headers：复制HTTP响应头到系统剪贴板

• Copy Response：复制HTTP响应内容到系统剪贴板

• Copy as cURL：将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)

• Copy All as HAR：将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

• Save as HAR with Content：将资源的所有的网络信息保存到HAR文件中(.har文件)

• Clear Browser Cache：清除浏览器缓存

• Clear Browser Cookies：清除浏览器cookies

• Open in Sources Panel：当前选中资源在Sources面板打开

• Open Link in New Tab：在新tab打开资源链接

• Copy Link Address：复制资源url到系统剪贴板

有数上实战

• 查看图表中sql逻辑 F12打开开发者工具-NetWork-WS-Messages-result-extra-sql,即可查看生成的sql
• 查看报告的资源（数据连接id、报告组件id等） 做集成中经常用到的资源id，怎么获取如： 报告 id，组件id，数据模型id，数据连接id