点击蓝色“程序猿DD”关注我
回复“资源”获取独家整理的学习资料!
作者 | 老姚
来源 | http://rrd.me/enqVF
对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。这个网站是:umaar.com/dev-tips/,本文分享一些实用且聪明的调试技巧。
1、曾经,在线调伪类样式困扰过你?
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/cae373620bcaa666b883e4271485a47e.jpeg)
2、源代码快速定位到某一行!ctrl + p
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/43fa03e55e2695ded003c03d3622b3a7.gif)
3、联调接口失败时,后台老哥总管你要response?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/8590b1a0fed251cc35156319afedebaf.gif)
4、你还一层层展开dom?Alt + Click
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/5d254f10e1070fc9a201a5f3e6aa947c.gif)
5、是不是报错了,你才去打断点?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/9522db4bca06d78f5fbefac48d83faf8.gif)
6、你是不是经常想不起来,在哪绑定事件的?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/edce145ac648e3f7fc3dfb27a2f8e386.gif)
7、你是不是打断点时还要去改代码?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/83c3ecffb5278dfaede2042edf59e25d.gif)
8、看dom层级的最直观的方式?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/d807f11b3690ce2867ce6ae2d7e0a92c.gif)
9、查一些特定的请求,过滤器用过吗?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/50fec2e926059bcb1e6da9f8224f17c9.gif)
10、在Elements面板调整dom结构很不方便?
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/26cb24cbbc3cbeb223e1b91933daa234.gif)
11、想知道,某图片加载的代码在哪?Initiator!!
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/85ce1425c0a0a05f852cca0dd38cbfbe.jpeg)
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/482283ef7d3451ddba0455a85b276122.jpeg)
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/b5b9e529ccbb0d2e2543edab08518c49.jpeg)
12、不想加载某个文件了?
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/02fef10d7bd3724bf54caf048fd46025.jpeg)
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/5b2008f38ff9f864c72032d9985d7888.jpeg)
多的就不列举了,可以看看开头的网站。看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。
开发者工具的功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看:
中文版:https://www.html.cn/doc/chrome-devtools/
推荐一个 免费的写博神器:openwrite.cn。Markdown一次编写,轻松发布到CSDN、博客园、思否、掘金、简书等主流技术平台。
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/e6fcff3c073426ac6e33cb9bef2241f0.gif)
点一点“阅读原文”小惊喜在等你