Chrome调试技巧

发表于 更新于 分类于
本文字数： 420 阅读时长 ≈ 1 分钟

查看页面性能 – Performance

步骤：[F12] -> [Performance]窗口

查看文件中代码使用情况 – Coverage

步骤：[F12] -> [···] -> [More Tools] -> [Coverage]

点击加载之后可以查看加载文件使用情况，点击文件进入Sources窗口，可以查看已运行代码部分。

使用node调试工具

如调试webpack输入输出的内容，在npm script中设置"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"，表示bugger模式运行webpack.js且在第一行打断点。如果需要在其他的地方打断点，则需要在目标地方写上debugger。

debug运行的时候可以打开chrome -> F12-> 点击node图标 -> 在Source窗口进行断点调试