Chrome开发者工具介绍-Toy模板网

这篇具有很好参考价值的文章主要介绍了Chrome开发者工具介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

Chrome开发者工具是谷歌浏览器自带的一款开发者工具，它可以给开发者带来很大的便利。常用的开发者工具面板主要包含Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板。

名称	说明
`Elements`	查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈
`Console`	记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell
`Sources`	用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，可以调试JavaScript源代码，可以给JS代码添加断点等
`Network`	从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
`Performance`	评估实时网页性能以及相关的数据
`Memory`	堆栈快照、JavaScript函数内存分配、隔离内存泄漏
`Application`	记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据等

1 打开DevTools

路径1：菜单——>更多工具——>开发者工具
Chrome开发者工具介绍,工具,chrome,前端
路径2：快捷键F12
路径3：右键——>检查

2 命令菜单

在控制台中，可以打开命令菜单的快捷键：
mac：command+shift+p
win：ctrl+shift+p
Chrome开发者工具介绍,工具,chrome,前端
一些实用的命令：

说明	命令
切换主题颜色	`switch to dark theme`切换黑色主题 `switch to light theme`切换白色主题
截屏	`Capture area screenshot`截取网页上任意区域的屏幕，不包括控制台 `Capture full size screenshot`截取全屏，包括滚动条的区域 `Capture node screenshot`截取某个元素的屏幕（选择该命令后，使用左上角的箭头选中页面上某个元素，再打开命令菜单输入该命令） `Capture screenshot`截取网页当前的屏幕
切换调试工具的位置	`Dock to bottom`底部显示调试工具 `Dock to right`右边显示调试工具 `Dock to left`左边显示调试工具

3 Elements面板

ctrl+F 查找

//section/p 查找section下面的p标签

Console输入 inspect(dom节点) 查找dom节点

auto-complete添加样式输入属性名称或者属性值，自动补充

user agent stylesheet 浏览器内置样式
Chrome开发者工具介绍,工具,chrome,前端

inherited from div… 从…继承来的样式A
Chrome开发者工具介绍,工具,chrome,前端

Pseudo 定义的伪类
Chrome开发者工具介绍,工具,chrome,前端

Chrome开发者工具介绍,工具,chrome,前端

:hov 查看hover
:cls 可以去掉类名，也可以更改某个元素的类名
Chrome开发者工具介绍,工具,chrome,前端

复制样式：选中某个元素，右键，选择copy——>copy styles
Chrome开发者工具介绍,工具,chrome,前端

Conputed列出了所有生效的样式，Show all可以看到从父元素继承来的样式，Group：对样式进行功能上的区分
Chrome开发者工具介绍,工具,chrome,前端

Layout分成了grid和flexbox，列出了所有用到弹性布局和网格布局的容器
Chrome开发者工具介绍,工具,chrome,前端

show line numbers 展示列数行数
show line labels 展示名称
show track size 网格所在空间大小
show area names 每个网格名称
extend grid lines 延长辅助线
Chrome开发者工具介绍,工具,chrome,前端

Chrome开发者工具介绍,工具,chrome,前端

列出页面中所有的绑定的事件，remove去掉事件监听
Chrome开发者工具介绍,工具,chrome,前端

DOM Breakpoints
subtree modifications：以当前节点为根节点，子节点修改了会暂停运行
attribute modifications：当前节点属性被修改了，会暂停
node removal：当前节点被删除了，会暂停
Chrome开发者工具介绍,工具,chrome,前端