对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。
今天,大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。
所有的我都看了,这里随便列举几个个人之前不了解,觉得挺有用的。
1.曾经,在线调伪类样式困扰过你?
2.源代码快速定位到某一行!ctrl + p
![759b10a19980829189746b18f011c97aae6ffca6](https://yqfile.alicdn.com/759b10a19980829189746b18f011c97aae6ffca6.jpeg?x-oss-process=image/resize,w_1400/format,webp)
3.联调接口失败时,后台老哥总管你要response?
![d4fd494cc4066d0a8bd0efe28c6863b86041d9b3](https://yqfile.alicdn.com/d4fd494cc4066d0a8bd0efe28c6863b86041d9b3.jpeg?x-oss-process=image/resize,w_1400/format,webp)
4.你还一层层展开dom?Alt + Click
![042bf9fe04b5c07371450da5e44fd5ff4b869bf4](https://yqfile.alicdn.com/042bf9fe04b5c07371450da5e44fd5ff4b869bf4.jpeg?x-oss-process=image/resize,w_1400/format,webp)
5.是不是报错了,你才去打断点?
![80cd279be0f5e27d8a63420bff2433a32b7bbe53](https://yqfile.alicdn.com/80cd279be0f5e27d8a63420bff2433a32b7bbe53.jpeg?x-oss-process=image/resize,w_1400/format,webp)
6.你是不是经常想不起来,在哪绑定事件的?
![397ecfb011a7d317295852cbdf85cd0df7a80688](https://yqfile.alicdn.com/397ecfb011a7d317295852cbdf85cd0df7a80688.jpeg?x-oss-process=image/resize,w_1400/format,webp)
7.你是不是打断点时还要去改代码?
![5f0e9d26dc7b22f10bad9dde4955e75a8517ea33](https://yqfile.alicdn.com/5f0e9d26dc7b22f10bad9dde4955e75a8517ea33.jpeg?x-oss-process=image/resize,w_1400/format,webp)
8.看dom层级的最直观的方式?
![93efbbcdeea71864ee9ae145b4fd4b6fec977944](https://yqfile.alicdn.com/93efbbcdeea71864ee9ae145b4fd4b6fec977944.jpeg?x-oss-process=image/resize,w_1400/format,webp)
9.查一些特定的请求,过滤器用过吗?
![aa16fad648465d5ee29deee6c3c02affc3f0a0ff](https://yqfile.alicdn.com/aa16fad648465d5ee29deee6c3c02affc3f0a0ff.jpeg?x-oss-process=image/resize,w_1400/format,webp)
10.在Elements面板调整dom结构很不方便?
![852e0288ebde029c6dbc9ba3a71907326f70f65f](https://yqfile.alicdn.com/852e0288ebde029c6dbc9ba3a71907326f70f65f.jpeg?x-oss-process=image/resize,w_1400/format,webp)
11.想知道,某图片加载的代码在哪?Initiator!!
![14308ee56497f8291754239772d65a843d9e38e2](https://yqfile.alicdn.com/14308ee56497f8291754239772d65a843d9e38e2.jpeg?x-oss-process=image/resize,w_1400/format,webp)
12.不想加载某个文件了?
![7bbe665166b1000c6e469968bb17d3128ba35aad](https://yqfile.alicdn.com/7bbe665166b1000c6e469968bb17d3128ba35aad.jpeg?x-oss-process=image/resize,w_1400/format,webp)
多的就不列举了,可以看看开头的网站。看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。
开发者工具的功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看:
developers.google.com/web/tools/c…
中文版:
======================
补充:
见评论中多人问gif制作软件是什么。
搜索了一下,应该是www.techsmith.com/,看着说明,表示软件太专业。。
但我用过两个小软件很不错,非常容易上手:
效果如下:
![e385323b116e6c0973381efce471a94d83d6ce13](https://yqfile.alicdn.com/e385323b116e6c0973381efce471a94d83d6ce13.jpeg?x-oss-process=image/resize,w_1400/format,webp)
本文完。