chrome开发者工具各种骚技巧

简介: 对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。今天,大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。

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

今天,大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。

网站是:umaar.com/dev-tips/

所有的我都看了,这里随便列举几个个人之前不了解,觉得挺有用的。

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

ac3d3beaa7b8ff97f456b3aae4681a3a696edd52

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

759b10a19980829189746b18f011c97aae6ffca6

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

d4fd494cc4066d0a8bd0efe28c6863b86041d9b3

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

042bf9fe04b5c07371450da5e44fd5ff4b869bf4

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

80cd279be0f5e27d8a63420bff2433a32b7bbe53

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

397ecfb011a7d317295852cbdf85cd0df7a80688

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

5f0e9d26dc7b22f10bad9dde4955e75a8517ea33

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

93efbbcdeea71864ee9ae145b4fd4b6fec977944

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

aa16fad648465d5ee29deee6c3c02affc3f0a0ff

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

852e0288ebde029c6dbc9ba3a71907326f70f65f

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

14308ee56497f8291754239772d65a843d9e38e2

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

7bbe665166b1000c6e469968bb17d3128ba35aad

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

开发者工具的功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看:

developers.google.com/web/tools/c…

中文版:

www.css88.com/doc/chrome-…


======================

补充:

见评论中多人问gif制作软件是什么。

搜索了一下,应该是www.techsmith.com/,看着说明,表示软件太专业。。

但我用过两个小软件很不错,非常容易上手:

效果如下:


e385323b116e6c0973381efce471a94d83d6ce13

本文完。


原文发布时间为:2018年05月11日
原文作者:bug给我滚
本文来源:  掘金  如需转载请联系原作者



相关文章
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
107 1
|
Web App开发 JavaScript 前端开发
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
753 0
|
7月前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
|
8月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
90 0
|
5月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
6月前
|
Web App开发 存储 缓存
Chrome开发者工具学习
Chrome开发者工具学习
|
Web App开发 缓存 网络协议
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
400 0
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
|
Web App开发 前端开发 搜索推荐
chrome 开发者工具——前端实用功能总结
chrome 开发者工具——前端实用功能总结
185 0
|
Web App开发 SQL 编解码
04-Chrome开发者工具使用教程
04-Chrome开发者工具使用教程
|
Web App开发 缓存 JSON
chrome浏览器自带的开发者工具查看http头以及详解http头
1.浏览器常见HTTP请求头解释 使用chrome浏览器自带的开发者工具查看http头的方法 1.在网页任意地方右击选择审查元素或者按下 shift+ctrl+c, 打开chrome自带的调试工具; 2.选择network标签, 刷新网页(在打开调试工具的情况下刷新); 3.刷新后在左边找到该网页url,点击 后右边选择headers,就可以看到当前网页的http头了;
4295 0