浏览器家园·资讯

展开

Chrome 调试技巧

编辑:浏览器知识

【1】DevTools触发伪类

右键单击Elements面板中的元素节点并选择“ force state ”。或者在Sytle子窗格中单击“:hov ”图标。可以触发元素上的伪类来研究元素在悬停时的效果和样式

【2】DevTools-在任何网页上运行预定义的代码片段

DevTools中有一个叫做代码段的特性,它允许您可以在网页上运行的测试代码(这比在控制台面板中重新键入JavaScript代码要方便一些)

  1. 单击Sources,左侧小窗口选择snippets
  2. 单击New snippet 新建
  3. 输入文件名和需要测试的代码片段
  4. 右击文件并选择Run(或Ctrl/Cmd+Enter)
  5. 单击Console查看代码运行结果

【3】使用CSS选择器搜索DevTools-DOM树

当使用Elements面板浏览DOM时,尝试通过CSS选择器搜索节点。

【4】DevTools-转到特定列的行号

  1. 打开Sources面板中的文件, 按快捷键ctrl + o
  2. 输入:5:20   Enter
  3. 请注意,您被带到了第5行第20栏!

【5】DevTools- Ctrl+单击可以在Sources面板中添加多个游标

【6】快速编辑HTML元素标记

您可以双击Elements面板中节点的开始标记来编辑它,结束标记将随着您的更改而自动更新。

【7】ALT+单击可以展开所有子节点

在Elements面板中,使用Alt+单击可以展开该Dom节点下的所有Dom子节点

【8】在任何节点上显示该节点绑定的事件

【9】扩展CSS缩写属性

在Style窗格中,可以展开css缩写属性,如background或padding,并查看为您定义的全部属性

【10】将元素滚动到视图中

  1. 右击Elements面板中的DOM节点。
  2. 选择 Scroll into view

【11】ctrl+d 选择下一个相同的单词

在Sources面板编辑器中,可以使用ctrl + d 选择多个相同的单词做操作

【12】添加一个新的自定义维度设备作为预置

【13】DOM的改进面包屑线索

Elements元素面板中有一个面包屑痕迹,它可以帮助您在浏览DOM时跟踪您的步骤。

【14】netWork网络请求过滤器

【15】在DevTools控制台面板中编辑HTML

【16】从DevTools生成的调色板中选择一个新的颜色

【17】DOM属性中的增量和递减数

可以使用键盘上/下箭头修改DOM属性或样式的数量值

【18】使用样式规则工具栏增加常见样式

【19】通过控制台更好地记录对象和数组

【20】通过控制台了解JS代码的速度

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。console.time方法是开始计算时间,console.timeEnd是停止计时,输出脚本执行的时间。这两个方法中都可以传入一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。测试代码写在这两个方法之间。

【21】使用切换元素类功能进行即时视觉反馈

在样式窗格中,单击.cls标签,可显示隐藏Dom元素的类名

【22】DevTools黑色主题

【23】在没有浏览器扩展的情况下捕获全尺寸屏幕截图

在控制台中按快捷键Ctrl + Shift + p进入命令菜单再输入screenshot

 

【24】用DevTools实现JavaScript代码库的现代化

新的“copy for fatch”功能扩展了NetworkPanel上下文菜单,右击网络请求,然后以curl形式复制。用FETCH API替换代码库中现有的Ajax调用。如果要验证剪贴板中的FETCH API调用,可以将其粘贴到控制台面板中,并在其前缀加上await

【25】查看WebSocket消息

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_38128179/article/details/99828277
文章TAG:chrome  调试  技巧  Chrome  

加载全部内容

相关教程
猜你喜欢
大家都在看