序言

针对chorme的控制面板调试工具,做为前面肯定都理解了基本的应用,可是这些年的开发设计经历中,常常依然会传出“原先还可以这样用”的感概,想一想可能没有多少人能了解所有的调节选择项,因此写一个系列文章来分享一下,这些“还可以那样”的功效。但是奇奇怪怪的作用一直许多的,我并不想仅仅循规蹈矩写出一篇说明文档来,文中尽可能只挑选出这些有意义的作用来介绍

此系列文章还是按照调节栏的tab为归类来进行介绍,希望能够帮助到大家对于调试工具有新的认识,进一步提高研发效率。

此章范畴:elements,source,console。

一、console

1.页面刷新后依然保存日志

这个是我非常自己喜欢的一个作用,在不知道他们作用以前,碰到某一log时有更新或是自动跳转逻辑情况下,经常要手动式return,数次修改后更新效果展示就是靠记忆力太麻烦了,很不形象化,白白浪费很多时间。

设定如下所示:

点一下console面板右上角的设定传动齿轮logo,选定“preserve log”就可以,如下图所示,更新后汉语日志仍然保存,红色字体标出你更新或是自动跳转的时间段和途径,十分方便。 elements,source,console

2.展现日志打印时间

无需解释,立即看效果:

elements,source,console

设定部位如下图:

elements,source,console

3.直接从console安装npm包

根据chrome软件能够实现在控制面板立即组装npm包,方便快捷一些临时性的专用工具标准库来调节。 应用组装都很简单,就不多说了,详细console-importer。

实际效果如下图所示(彩色图库官方网readme):

elements,source,console

二、source

1.断点调试-为自变量加上watcher

断点调试是一个极其常见的作用,坚信大家也掌握F8,F10这些键盘快捷键的用处,这儿想谈及的一点是,断点调试上对变量的观查,其实也可以选定自变量并添加监视,比鼠标光标hover表明比较方便。

一般的方法,鼠标光标遮盖,表明自变量:

elements,source,console

我们将要必须观察到的自变量添加监视目录(选定自变量并鼠标右键):

elements,source,console

一起来看看实际效果,特别注意右边watch的改变,是否形象化了许多?再也不需要在一堆编码里去提心吊胆选定自变量了。

elements,source,console

2.将控制面板改动立即同歩源代码编码

有些时候我们都会在source调节我们自己的原素款式,然后再将调节好一点的款式拷贝到在线编辑器的源码中。那么这样的设定将省去拷贝的那一步,将于source改动的样式立即改动到源代码中。

设定方法,在FileSystem菜单栏中单击“add folder to workspace”,选定你项目文档就可以(mac系统会了解管理权限批准,需允许)

elements,source,console

一起来看看实际效果,我尝试随意改动一个css编码,增加一个color为红色,再去在线编辑器改成灰黑色,源代码与source文档可能同歩改动。

elements,source,console

三、Elements

1.迅速形成原素所选择的js代码

选定原素后,鼠标右键copy js path,能够快速形成选定现阶段元素js代码;

elements,source,console

剪切板黏贴: elements,source,console

此外顺带一提,在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就轻松多了。

elements,source,console copy xpath 和copy full xpath 的区别是前面一种为绝对路径,后面一种为相对路径。

剪切板具体内容:
//*[@id="zh-CN"]/div[10]/div[3]
/html/body/div[10]/div[3]

篇幅有限,第一章具体内容告一段落,希望能对小伙伴们一些获得,假如反响不错很多人都有兴趣爱好,接下来会继续完善network、performance等重要内容。

<前端开发WwW.adminjs.cn>

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:elements,source,console