命令菜单

打开命名菜单的快捷键：ctrl+shift+p

切换主题

输入switch to dark theme,就可以切换成黑色主题；输入switch to light theme就可以切换到白色主题等。

截屏

Capture area screenshot：对鼠标拖动区域的截屏

Capture full size screenshot：对整个屏幕的截屏

Capture node screenshot：对node节点的截屏

改变调试窗口的位置

Dock to bottom：设置调试窗口在底部

Dock to left：设置调试窗口在左侧

Dock to right：设置调试窗口在右侧

Undock into separate window：设置调试窗口为独立的窗口。跟显示界面分离开

常用面板

Element

检查元素

当界面元素显示异常时，我们可以直接选中之后右键选中检查，然后在调试窗口就可以直接定位到具体的标签位置

然后就可以看到该元素相关的信息，html，css样式等

模拟手机上的显示效果

横竖屏切换：

模拟各种手机：

设置自定义的屏幕尺寸：

设置屏幕显示的比例：

Css调试

快捷键查找某个元素

快捷键：ctrl+F

输入某个标签名时会查找该标签;

也可以根据选择器来查找。例如查找class名为list-wrap的标签

通过console查找元素

在console窗口中输入inspect(XXX)方法可以查找对应的元素

例如输入inspect(document.getElementById('test-id'))可以查找id为test-id的元素，会直接定位到Elements窗口中元素所在的位置。

编辑样式

修改样式

选中要修改样式的标签，就可以在右侧修改该标签的样式（注意：该修改只是暂时的，刷新界面样式就会恢复）

样式常驻

正常情况：

选中元素，右侧窗口有个:hov按钮，点开之后会有多种状态，选中某个状态之后，该元素就会保持该状态的样式。

多个元素的选择器名称相同，如何修改其中某个元素的样式

那该如果修改其中某个元素的样式呢？

我们可以选中某个样式，

可以看到取消勾线之后，div-2所在的标签的class为空，也因此div-2的样式改变了。

复制样式

如果看到其他网页的样式非常好，想要借鉴，怎么才能快捷的获取到样式呢？

原样式：

我们想要复制京东上的一个按钮的样式：

选中元素→右键→copy→copy styles

接着，粘贴到btn-2-wrap中

就可以看到按钮2的样式改变了。

computed面板

computed面板可以看到所有的样式设置。

点击show all 会显示所有的样式设置，包括从父元素或者祖先元素继承的样式。

点击Group，样式会被分组显示。

Layout面板

Layout面板有两种布局，grid网格布局和flex弹性布局

1、grid网格布局

hide line labels的效果：

show line numbers

show track sizes:

选中 show track sizes之后会显示每个格子的尺寸

show area names:

选中show area names会显示每个格子的名称

extend grid lines:

选中extend grid lines之后，辅助性会延长，方便观察和其他元素的定位。

2、flex弹性布局

选中div.flex-wrap之后，flex-wap元素就显示了辅助线，辅助线可以帮助查看每个子元素的尺寸等信息。

点击div.flex-wrap旁边的颜色框，可以修改辅助线的颜色

在sytle面板中，在flex或者grid布局旁边会有一个图标，点击图标就会有一些属性呈现，我们可以点击对应的属性看效果，方便开发者调试。

properties面板

properties面板呈现的是节点的属性。

控制台

快捷键：ctrl+shift+j

ctrl+shift+j可以快速打开console控制台。

$_返回上一条语句的执行结果

$0上一个选择的DOM节点（$1,$2,$3...）

依次选中p-wrap,btn-2-wrap,flex-wrap之后，通过$0,$1,$2获取到选中的dom节点

console的一些方法

console.log打印日志

console.error打印错误信息

console.warn打印警告信息

console.clear()清空日志

console.group()将日志分组显示

console.time()打印一段代码执行的时间

console.table()将数组以表格的形式打印出来

通过日志级别，过滤日志

观察变量当前的值

断点

监听值的变化

在断点的过程中，会时刻呈现当前变量的值

DOM Breakpoints

选中一个元素，右键，在弹框的对话框中选择break on，会有3个断点方式

subtree modifications：子节点被修改时的断点

attribute modifications：节点属性被修改时断点

node removal：节点被移除时断点

尝试下attribute modifications。选中之后，节点左侧就会有个断点的图标，

当修改该节点的属性时，代码就会停止执行

右侧也说明了执行被暂停的原因：属性发生改变。

chrome调试工具使用技巧汇总相关推荐

一些Chrome 调试小技巧汇总
写在前面本文包括浏览器调试,不包括web移动端调试. 本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console 基本输出想必大家都在用console.log在控制台 ...
【译】你不知道的 Chrome 调试工具技巧第二十天：Workspace的黑魔法
特别声明本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有 24 篇,一直更新到 12 月 24 日版权归原作者所有. 作者在 Twitter 上推荐 ...
【译】你不知道的Chrome调试工具技巧第七天：异步console的趣味小窍门
特别声明本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有24篇,一直更新到12月24日版权归原作者所有. 前两篇的翻译链接我已经给到了作者本人,虽然 ...
【译】你不知道的 Chrome 调试工具技巧第十二天：忍者日志打印！(the ninja logs)...
特别声明本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有 24 篇,一直更新到 12 月 24 日版权归原作者所有. 作者在Twitter上推荐我们 ...
移动平台WEB前端开发技巧汇总
原名<移动平台3G手机网站前端开发布局技巧汇总>,由武方博整理的,让我们了解下移动设备上的WEB站点开发的基础知识,多些时间和精力去优化其他细节,我这里对原文的标签格式做了细微的调整,阅读 ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）...
大家好,我是漫步,今天来分享一些比较高级复杂的CSS技巧,都是我们平常常用的,或许对你有所帮助. 设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时 ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景 outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯 ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
Chrome 打印PDF技巧
Chrome 打印PDF技巧原文地址:https://github.com/zhongxia245/blog/issues/22 欢迎star 本教程,使用Mac电脑进行演示. 常规的Chrome打 ...
ipadpro+打开html文件,iPadPro日常基本功能的使用技巧汇总
iPadPro日常基本功能的使用技巧汇总今天来给大家分享一下了,苹果的iPadPro这款平板还是很实用的,而且还自带的手写笔,平时大家在使用这款iPadPro中肯定遇到了不少问题,下面小编就来分享一下 ...

chrome调试工具使用技巧汇总