chrome的F12（开发者工具）介绍

最新推荐文章于 2025-05-26 14:36:27 发布

anj3

最新推荐文章于 2025-05-26 14:36:27 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zhexiaode/article/details/84927177

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

在这里插入图片描述

右上角菜单≡

高亮显示页面重绘：More tools > Rendering > 勾选Paint flashing
监控页面上没有使用到的资源文件： More tools > Converage(点进相应文件，里面标红的表示没使用，绿色则表示被网站使用了)
怎么监控页面动画变更（多用于开发简单网页游戏时调试）：More tools > Animations。
网络条件与User-Agent（改变浏览器是pc版还是android版）的设置：More tools > Network conditions (Network throttling ，模拟3G网速快或慢的情况；User agent，去掉勾后选相应项，来模拟pc或手机端)
远程调试android设备方法：More tools > Remote devices ，在pc上调试android手机。
让浏览器阻止请求某个资源：More tools > Request blocking 勾选复选框，点加号用正则表达式填写要过滤的文件。
在全站文件中搜索内容：More tools > Search (支持正则表达式)
模拟传感器：More tools > Sensors（模拟手机横竖屏、坐标等）

Elements窗口，调试“HTML、CSS”多在此操作。前端设计师用的多。

选中一个页面元素，然后右键copy outerHTML，获得选中元素及其子元素的html代码，copy seletor获得选中元素的css层次选择器。
Styles，可以直接修改元素样式并立刻看效果。里画横线样式，是因为被覆盖（样式优先级造成的）。下面还有“盒子模型”，也可以改值在页面中看效果。点击:hov，选相应项，可查看鼠标放上和移除css效果。
Event Listeners，用于找到元素的对应事件源码。步骤：点右上角“鼠标”图标并选中目标元素，然后出现click，在对应控件后面点击链接就能定位到js源码。

Console窗口，显示当前页输出的日志。

可以直接在里面写一段与页面上下文无关的js并运行。右边齿轮可勾选显示日志时间戳等。

NetWork窗口，查看请求的所有的各类资源（all–所有资源，XHR–所有ajax请求，…），查看每个资源报文头、执行时间和内容。

必须F5后页面资源才能被监控到。
第一排菜单依次是：“开启or关闭”功能，清空当前记录，摄像头开启则对每次请求进行截图，对请求记录进行分组，勾选Preserve log，F5后旧的请求记录不会被清空。勾选Disable cash，请求时会重新获得最新资源。Offline，模拟断网效果。
点“XHR”筛选出所有ajax请求，然后点击相应项，可以查看“报文头、预览响应结果(当结果是json时会格式化显示)、响应内容、响应时间”。
状态栏如12 requests、858KB transferred 、Finish：31.9s、DOMConentLoaded:31.74s、Load:31.81S。含义：页面共12个资源请求，文件大小是858KB，页面加载结束耗时31.9s，执行DOMConentLoaded事件（DOM载完）耗时31.74s，执行Load事件耗时31.81s。

Sources窗口

在要调试的js处最左边打断点，触发代码后，F10进行一步一步调试js。
调试js时Call Stack(调用堆栈，是一个方法列表，按调用顺序保存所有在运行期被调用的方法)显示被调用的方法。
Watch，调试时监控自己添加到watch的变量。Scope显示被使用变量，Local里是局部变量。
点击主窗口状态栏左边{}可对当前页的html、css和js代码进行格式化显示。
左边Page是当前页所有资源tree，可Ctrl+P通过key搜到目标资源。
左边FileSystem浏览到当前也所在文件夹，当你在Elements中改动时会同步到源码中。

Performance

Performance 性能分析：指分析有js动画的页面为啥卡顿。右边齿轮，可对cpu4倍或6倍降低（以人为降低js性能）。
点击黑“圆圈”，进行录制。过一段时间后点击停止。红色时段表示卡顿，点选可了解帧情况。

Application

Application的cookie，列出某个站点所有的cookie。可在此编辑某个cookie值。可清空某个站点所有cookie。
Application的Cache：离线化类应用主要用到本功能，如GMail的离线功能。把资源缓存下来。
Application的Frames，可快速保存站点资源。展开后右键保存。