TOOL►chrome

chrome

chrome 官方使用文档

控制台

element

1、样式转换和吸色盘，shift点击颜色可以切换格式，直接点击可以换出吸色盘

2、属性断点,当js修改dom属性后，进入断点

3、点击dom右键，点击expand recursively，展开所有的dom。collapse children 收起所有的子元素。

console

1、console.count() 可记录函数执行次数。

2、console.time() & console.timeEnd()比如需要考量一段代码执行的耗时情况。

3、$命令返回最近一次表达式执行的结果，功能跟向上的方向键再回车是一样的，`2+2 // 回车，再$+1 // 回车得5`

4、debug & undebug接收一个函数名作为参数。而undebug 则是解除该断点。

chrome的console里输入如下：

1
2
3
function aa () {}
debug(aa)
aa() // 进入断点

5、getEventListeners(dom)获取dom监听的事件。

6、monitorEvents/unmonitorEvents。

1
2
3
4
monitorEvents(dom, 'click')
monitorEvents(document, 'scroll')
monitorEvents(window, ["resize", "scroll"])
monitorEvents($0, "key");

7、左侧按钮控制台展示/隐藏分类菜单，preserve log 保留日志，不会因为刷新清空数据，展示时间戳，在右侧的设置icon下，找到show timestamps选择。

8、在element点击一下dom元素，在console里输入$0即可输入该dom。$()是document.querySelector()的简写, $$()–document.querySelectorAll()的简写，
$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录

9、按Ctrl+P（cmd + p）, 就能快速搜寻和打开你项目的文件。

10、在源代码中搜索 Ctrl + Shift + F (Cmd + Opt + F)，这种搜寻方式还支持正则表达式

11、快速跳到指定行，在Sources标签中打开一个文件之后，Ctrl + G，(Cmd + O)，然后输入行号

12、Web浏览器在构建如文本框、按钮和输入框一类元素时，其它基本元素的视图是隐藏的。你可以在Settings -> General 中切换成Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。可以看到很多webkit属性并自己覆盖修改。

13、建议，在使用console.log();的时候，不仅仅打印变量，而是要打印对象，用大括号({})将变量包围起来，js的简写属性。这样的优点是不仅会把变量的值打印，同时还会将变量名打印出来。

1
2
3
console.log(a, b)
改
console.log({a, b})

14、console可用

15、你要debug一个按钮的问题，但是你不知道这个按钮对应的事件函数在代码中什么位置。使用getEventListeners函数，然后将debug方法注入进去。当你点击按钮的时候，就会在该函数的第一行停下来。

1
2
3
var a = getEventListeners($0)
// 根据值找到lister监听的函数，debug注入
debug(a.click[0].listener)

16、 copy(a) 会把a变量的内容复制到剪切板

network

1、重新发送xhr请求,右键——点击reply XHR

2、preserve log 保留日志,online可以切换网络速度,3g,4g,断网等,filter和对应的tab可以筛选请求.capture screenshot捕获网络加载时的屏幕状况,分析页面加载情况.

3、shift + command + p 输入block找到show request blocking 可以设置不想要的那些请求阻塞掉.

source

1、自定义片段snippets,可以在以后使用

其他设置

1、开启开发者工具的实验性功能，你可以到chrome://flags页面，然后开启Developer Tools experiments选项。
当开启后，在开发者工具的设置页面，可以发现多了一个Experiments选项

2、如果您不小心关闭了一个标签，按下Ctrl或Cmd+Shift+T，Chrome将重新打开你最近关闭的标签

3、Ctrl+Shift+D将所有打开的选项卡保存到一个文件夹中

4、如果发现Chrome有问题，地址栏输入Chrome://restart，浏览器就会重新启动并在瞬间恢复所有的标签和窗口

5、长按Chrome左上角的后退按钮，你将会看到一个弹出的历史栏

6、按Ctrl或Cmd+Shift+V 无格式粘贴

7、网页前加上“cache:”，可以查看这一网站的历史快照

8、Space 或 Shift-Space 还可以向上移动视图

9、任务管理器 菜单栏－更多工具 - 任务管理器，关闭死掉的tab页面（例如while死循环的）

10、 Ctrl+J 或command + shift + J 快速查看下载记录

11、在控制台输入document.designMode = 'on'浏览器变为可编辑状态

12、调试android的app内嵌套h5页面调试安卓

  • 安卓手机安装chrome浏览器，手机打开开发者模式，用usb线链接电脑，并且允许调试。

  • 电脑chrome地址栏输入 chrome://inspect 进入后点击 inspect 即进入调试模式（注意：第一次调试必须FQ）。

  • 调试和电脑端基本没有差异。电脑端修改样式等，手机立马变化。

13、 苹果手机调试ios

  • 打开手机Safari浏览器 设置（setting）－ safari-高级(advance)-打开web检查器

  • mac电脑 Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单

  • 然后打开mac safari 开发点击对应的ios设备就可以调试了

14、其他调试工具

eruda

vconsole

15、dom截图 shift + command + p 搜索screenshot capture node screenshot.

16、css/js覆盖率, shift + command + p 输入show coverage调出面板,点击reload开始检测.

指令

在Chrome地址栏输入即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
chrome://inspect/      查看开发工具

about:histograms       显示历史记录

chrome://bookmarks            Chrome书签管理

chrome://flags                Chrome高级设置,实验功能页面

chrome://omnibox/             智能地址栏

chrome://predictors/          URl输入命中率

chrome://about/               查看所有,只需记住这个

chrome://extensions           扩展程序页面

chrome://settings             设置页面

chrome://version              查询浏览器版本

chrome://quit、chrome://restart  快速退出和重启浏览器

chrome://flags

这里提供了大量处于实验阶段的功能选项。页面按照可用（Available）和不可用（Unavailable）两种分类方法，顶部位置提供的搜索栏，支持即时反馈搜索结果。当然如果你明确知道要找的实验功能选项名称，可以直接在浏览器地址栏输入 chrome://flags 选项名称，比如输入 chrome://flags/#enable-desktop-pwas，快速转至并高亮显示了查找结果。

插件

1、rikaikun 可以把网页中的日文汉字显示平假名和罗马音 适合日语学习者

2、tampermonkey用户脚本管理 Chrome上面的油猴脚本管理器,添加你的自定义功能请去https://greasyfork.org/zh-CN/

3、Wappalyzer

4、Awesome Screenshot

5、Web Maker 前端的利器之一。也就是提供在线写demo，分享给别人用于展示或调试。而Web Maker作为本地插件，主要是可以充当草稿纸的作用，能让你快速写一个demo。

6、Octotree能够让你通过文档库的方式管理、查看你的 GitHub 仓库

7、Lighthouse前端性能优化测试工具，可测试自己开发的App或者Web page性能的好坏，谷歌官方团队提供

8、Vue.js devtools调试插件,借助Vue.js devtools这款插件，大家就可以很方便地对数据结构进行解析和调试

9、WEB前端助手(FeHelper)一款国产的、超级实用的前端开发工具合集,Json工具、代码美化、代码压缩、二维码、Postman、markdown、网页油猴、便签笔记、信息加密与解密、随机密码生成、Crontab等等。

10、Axure 查看原型的拓展插件

11、markdown here 转化markdown语法,转好后可放到微信公众号使用

返回
顶部