Chrome 开发者工具各种骚技巧

た 入场券 2021-09-02 03:36 541阅读 0赞

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

优质文章,及时送达


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

对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。

最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。这个网站是:umaar.com/dev-tips/,本文分享一些实用且聪明的调试技巧。

1.曾经,在线调伪类样式困扰过你?

format_png

2.源代码快速定位到某一行 ctrl + p

format_png 1

3.联调接口失败时,后台老哥总管你要 response?

format_png 2

搜索Java知音公众号,回复“后端面试”,送你一份Java面试题宝典.pdf

4.你还一层层展开 dom:**Alt + Click**

format_png 3

5.是不是报错了,你才去打断点?

format_png 4

6.你是不是经常想不起来,在哪绑定事件的?

format_png 5

7.你是不是打断点时还要去改代码?

format_png 6

8.看 dom 层级的最直观的方式?

format_png 7

9.查一些特定的请求,过滤器用过吗?

format_png 8

10.在 Elements 面板调整 dom 结构很不方便?

format_png 9

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

format_png 10

12.不想加载某个文件了?

format_png 11

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

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

作者:老姚

juejin.im/post/5af53823f265da0b75282b0f

- END -

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

发表评论

表情:
评论列表 (有 0 条评论,541人围观)

还没有评论,来说两句吧...

相关阅读