chrome调试技巧

最新推荐文章于 2024-07-02 13:09:14 发布

sliiva

最新推荐文章于 2024-07-02 13:09:14 发布

阅读量473

点赞数

分类专栏：前端知识点文章标签： Chrome调试

本文链接：https://blog.csdn.net/lncci/article/details/88422854

版权

这篇博客总结了《你不知道的Chrome调试技巧》中的精华内容，涵盖了通用技巧如复制保存、快捷键使用、命令操作，以及console、network面板的高级用法。讲解了如何保存堆栈信息、切换DevTools布局、截屏、使用代码块，还揭示了console.log的潜在问题和设置对象输出格式的方法。此外，还介绍了监听函数、模拟网络状态、检查代码覆盖率等实用技巧，以及workSpace功能，允许直接在Chrome中修改代码并同步到文件系统。

摘要由CSDN通过智能技术生成

总结的掘金小册:你不知道的Chrome调试技巧里面的内容，部分有做总结，特别的章节满满的干货，就直接贴的链接。

通用：

Copying and saving

1、可通过copy拿到任何你能拿到的资源包括一些变量：copy(location)、copy($_)/copy($0)。
2、store as global：相对数据做额外的操作，但不想影响原来的值；对console中打印的数据，右击它，并选择 “Store as global variable” (保存为全局变量) 选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2……
3、保存堆栈信息( Stack trace )，用console打印出堆栈跟踪信息保存成文件给同事降低沟通成本。
4、元素面板中依然支持ctrl+c复制到剪切板

快捷键和通用技巧

1、ctrl + shift + D (⌘ + shift + D Mac）切换dock面板的位置。一般是上一个位置和现在的位置的转换。
2、ctrl + [ 和 ctrl + ] 左右切换devtools面板(元素面板、控制面板、网络面板、应用面板那些)
3、shift+上键/下键:10倍增加/减少数值。上键/下键：1倍增加/减少数值。option+上键/下键：0.1倍增加/减少数值
4、[ Ctrl] + [Shift] + [P] (Mac&#x