Chrome调试工具进阶指南一
一、console
1.页面刷新后仍然保留日志
这是我相当喜欢的一个功能,在不知道这个功能之前,遇到某个log后有刷新或者跳转逻辑的时候,经常需要手动return,多次改动后刷新对比效果也是靠记忆很麻烦,非常不直观,浪费了不少时间。
设置如下:
点击console面板右上角的设置齿轮logo,选中“preserve log”即可,如图所示,刷新后中文日志依然保留,蓝色字体标明了你刷新或者跳转的时机和路径,非常方便。
2.展示日志打印时间
无需多言,直接看效果:
设置位置如图:
3.直接在console安装npm包
通过chrome插件可以实现在控制台直接安装npm包,方便使用一些临时的工具类库来调试。 使用安装都比较简单,不再赘述,详见console-importer。
效果如下图(图源官方readme):
二、source
1.断点调试-为变量添加watcher
断点调试是一个极为常用的功能,相信大家也都了解F8,F10等等快捷键的用途,这里想提及的一点是,断点调试中对变量的观察,其实可以选中变量并添加监听,比光标hover显示更方便。
通常的方式,鼠标光标覆盖,显示变量:
我们将需要观察的变量加入监听列表(选中变量并右键):
来看看效果,注意观察右侧watch的变化,是不是直观了很多?再也不用在一堆代码里去小心翼翼选中变量了。
2.将控制台修改直接同步源文件代码
很多时候我们都会在source调试我们的元素样式,然后再将调整好的样式复制到编辑器的源代码中。那么这个设置将省略复制的这一步,将在source修改的样式直接修改到源文件中。
设置方式,在FileSystem选项卡中点击“add folder to workspace”,选中你的项目文件即可(mac系统会询问权限许可,需同意)
来看看效果,我尝试随便修改一个css代码,增加一个color为红色,再在编辑器改为黑色,源文件与source文件将会同步修改。
三、Elements
1.快速生成元素选择的js代码
选中元素后,右键copy js path,可以快速生成选中当前元素的js代码;
剪贴板粘贴:
另外顺便一提,在console中使用 以及 以及 以及$也可以用较短的js代码快速对元素进行选择,代替“document.querySelector”和“document.querySelectorAll”
$("span")
控制台输出:<span class="byte-select__suffix byte-select__suffix--down">…</span>
$$("button")
控制台输出:(5) [button.xitu-btn.with-padding.xitu-btn-outline, button.xitu-btn, button.select-btn, button.ui-btn.btn.line.medium.default, button.ui-btn.btn.primary.medium.default]
2.将节点保存为xPath
注:xpath是一个python中流行的html解析库,可以解析并返回结构化的html对象
很多前端或许没用过这个选项,但是xpath几乎是写爬虫最流行的html解析库,不同于js的节点选择语法,xpath有自己的一套规则表示对某个节点标签的获取,如果自己手动去写某个节点的获取代码是比较麻烦的,而保存为xpath就方便多了。
剪贴板内容:
//*[@id="zh-CN"]/div[10]/div[3]
/html/body/div[10]/div[3]
篇幅有限,第一章内容到此结束,希望能给朋友们一些收获,如果反响不错大家都有兴趣,后面会继续完善network、performance等重点内容。
最后
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一个一个地展示了
有需要的小伙伴,可以点下方卡片免费领取
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbeafi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13