前端开发Chrome调试的小技巧


本文摘自PHP中文网,作者angryTom,侵删。

本篇文章介绍了一些Chrome调试时的技巧,希望对各位学习前端开发的朋友有帮助!

前端开发Chrome调试的小技巧

1、呼出快捷指令面板:cmd + shift + p

在Devtools界面下,键入cmd + shift + p将其激活,然后开始在栏中键入要查找的命令或输入?号以查看所有可用命令 .

如下图:其中Open file,Go to line,Go to symbol对于快速打开文件和定位文件位置还是节省了不少时间.

2、性能监视器: performance monitor

3、本地覆盖:local overrides

感觉这个特性是超级棒。 使用我们自己的本地资源覆盖网页所使用的资源。 多说无益,直接举个例子大家就明白了。

大家看到了吧,我们可以把网络资源直接和本地资源映射,再次刷新网页,取得资源文件就是本地的了。这种对js、css等文件批量修改调试特别有用。

local overrides还可以模拟Mock数据,如果后端API还不OK或者不想频繁的发布后台API。这个功能是相当有用,不过听说还不支持XHR请求。

4、控制台内置指令

私以为如果网页里面如果没有引用jquery是不是就不能使用$这样的语法了,nonono

$(selector, [startNode]):单选择器

可以选择元素并触发元素事件.

阅读剩余部分

相关阅读 >>

浏览器解析渲染html文档的过程详解(图文)

node.js中怎么进行调试?

如何在Chrome中安装react开发工具

9 个值得收藏的前端优化小技巧(提高web性能)

前端开发Chrome调试的小技巧

你可能不知道的Chrome debug专用的函数!

css书写顺序需要注意哪些?

js遇到代码出现问题时调试代码的方法

h5设计时的小技巧总结

推荐一个Chrome devtools实用小插件:css overview panel

更多相关阅读请进入《Chrome》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...