AnitaSun的博客

调出 Command命令 Ctrl + Shift + PPaint flashing【重绘区域】突出显示需要重新绘制的页面区域（绿色）例：当我拉动开发者工具的边界线时，几乎整个页面都会发生重绘Layout Shift Regions【布局改变的区域】将页面改变的区域高亮为蓝色...

代码行断点代码中的代码行断点console.log('a');console.log('b');debugger;console.log('c');DOM 更改断点单击元素选项卡转到要设置断点的元素右键单击该元素将鼠标悬停在Break 上，然后选择Subtree 修改、属性修改或节点删除DOM 更改断点的类型子树修改属性修改节点移除XHR/获取断点当在XHR请求URL包含特定字符串时中断展开XHR Breakpoints点击+输入字符串。当此字符串出现在 X

重现错误单击打开演示。演示在新选项卡中打开。在 Number 1 中输入数字5在 Number 2 中输入数字2点击 Add Number 1 and Number 2熟悉 Sources 面板 UI点击Sourceget-started 是 get-started.html（不包括JS）get-started.js 就是 get-started 的 js 文件使用console.log()使用console.log()，您需要手动打开源代码，找到相关代码，插入consol

显示更多信息可以自己选择列显示的内容模拟较慢的网络连接重新加载正常重新加载 Ctrl+R：正常重新加载硬性重新加载：Ctrl+Shift+R:浅层次的清除历史记录，但不一定缓存完全清除。(Ctrl+F5)同理清空缓存并硬性重新加载：可以深层次的清除当前页面的所有的缓存，比如js css等检查资源的详细信息Stalled连接建立的时间Request sent请求发出去需要的时间TTFB（Time to First Byte） 首字节时间浏览器开始收到服务器响

打开coverage选项卡使用命令菜单【ctrl + shift + p】打开命令菜单，输入coverage记录代码覆盖率分析代码覆盖率红色表示未利用，蓝色表示已利用

此教程向您展示如何在控制台中记录和过滤消息打开演示查看从 Javascript 记录的消息单击 Log info ，在控制台输出日志信息点击输出消息旁边的 log.js点击Log Warning单击前面的展开 > 扩张图标Abandon Hope All Ye Who Enter。DevTools 显示导致调用的堆栈跟踪往控制台输出日志过滤消息按日志级别过滤各console方法被分配一个严重性级别：Verbose，Info，Warning，或Error。例如，.

检查节点选择网页内容，右键，点击 Inspect【检查】使用键盘导航DOM树使用上下箭头，可以在这几个li之间来回选择使用右箭头，展开这个li标签左箭头，折叠这个li标签搜索节点ctrl + f可以通过字符串，CSS 选择器 或 XPath 搜索DOM树拖动节点双击，随意拖动强制状态当进行某些操作时会触发某些操作，例如：将鼠标悬停在下方的蝇王上，背景颜色变为橙色。当鼠标移走，这种状态会消失，如果想使状态在鼠标离去之后还仍然保持鼠标放上去的状态。可以点

文章翻译自：https://developer.chrome.com/docs/devtools/css/grid/本指南将向您展示如何在页面上发现 CSS 网格、检查它们并在Chrome DevTools的Elements面板中调试布局问题本文中出现的截图中显示的示例来自这两个网页：Fruit box和Snack box发现 CSS 网格当页面上的 HTML 元素已经display: grid或display: inline-grid应用到它时，您可以grid在“Elements”面.