Chrome 开发者工具各种骚技巧

admin 2020年9月7日13:50:50评论216 views字数 1002阅读3分20秒阅读模式

点击上方 Java后端选择 设为星标

优质文章,及时送达



  • 曾经,在线调伪类样式困扰过你?
  • 源代码快速定位到某一行!ctrl + p
  • 联调接口失败时,后台老哥总管你要response?
  • 你还一层层展开dom?Alt + Click
  • 是不是报错了,你才去打断点?
  • 你是不是经常想不起来,在哪绑定事件的?
  • 你是不是打断点时还要去改代码?
  • 看dom层级的最直观的方式?
  • 查一些特定的请求,过滤器用过吗?
  • 在Elements面板调整dom结构很不方便?
  • 想知道,某图片加载的代码在哪?Initiator!!
  • 不想加载某个文件了?

对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。
最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。这个网站是:umaar.com/dev-tips/,本文分享一些实用且聪明的调试技巧。
1.曾经,在线调伪类样式困扰过你?
Chrome 开发者工具各种骚技巧
2.源代码快速定位到某一行 ctrl + p
Chrome 开发者工具各种骚技巧
3.联调接口失败时,后台老哥总管你要 response?
Chrome 开发者工具各种骚技巧
搜索Java知音公众号,回复“后端面试”,送你一份Java面试题宝典.pdf
4.你还一层层展开 dom:Alt + Click
Chrome 开发者工具各种骚技巧
5.是不是报错了,你才去打断点?
Chrome 开发者工具各种骚技巧
6.你是不是经常想不起来,在哪绑定事件的?
Chrome 开发者工具各种骚技巧
7.你是不是打断点时还要去改代码?
Chrome 开发者工具各种骚技巧
8.看 dom 层级的最直观的方式?
Chrome 开发者工具各种骚技巧
9.查一些特定的请求,过滤器用过吗?
Chrome 开发者工具各种骚技巧
10.在 Elements 面板调整 dom 结构很不方便?
Chrome 开发者工具各种骚技巧

11.想知道,某图片加载的代码在哪?Initiator!

Chrome 开发者工具各种骚技巧
12.不想加载某个文件了?
Chrome 开发者工具各种骚技巧

多的就不列举了,可以看看开头的网站。看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。


开发者工具的功能确实挺多,多的有时根本用不上,官网教程建议大家都看看。

作者:老姚

juejin.im/post/5af53823f265da0b75282b0f

- END -

最近整理一份面试资料《Java技术栈学习手册》,覆盖了Java技术、面试题精选、Spring全家桶、Nginx、SSM、微服务、数据库、数据结构、架构等等。
获取方式:点“ 在看,关注公众号 Java后端 并回复 777 领取,更多内容陆续奉上。
读 
1. 一文读懂 MySQL 主从复制读写分离
2. 牛逼!一个故事讲清楚 NIO 了
3. GitHub上最励志的计算机自学教程
4. 消息队列面试连环问

5. 这种 Github 不要写在简历上!

Chrome 开发者工具各种骚技巧


在看 Chrome 开发者工具各种骚技巧

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2020年9月7日13:50:50
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   Chrome 开发者工具各种骚技巧http://cn-sec.com/archives/121655.html

发表评论

匿名网友 填写信息