内容简介:如果经常需要在控制台中调用某段代码块,可以考虑把它保存起来以便复用。
ctrl + shift + P
打开命令面板,搜索 screen 可进行各类截图,包括节点截图、区域截图和全屏截图
3. 调试:
3.1 复制和存储
copy() store as global variable save as...
3.2 代码块保存和复用
如果经常需要在控制台中调用某段代码块,可以考虑把它保存起来以便复用。 source --> snippets --> + New snippet
新建代码块并保存。这不会随着缓存清除而消失。
3.4 节点引用
-
$0
是对当前选中节点的引用,$1
是相对于$0
的上一个被选中节点,以此类推,$2
到$4
同理。 -
$(...)
:这里注意和 jquery 中的$(...)
是不一样的。例如,jq 中的$('div')
可以选中所有 div 元素,而控制台中的$('div')
则类似于document.querySelector('div')
,只能匹配第一个 div。 -
$$(...)
:类似于document.querySelectorAll('div')
,可以匹配所有的 div。区别在于,它可以确切返回一个数组,而不是Node list
。 -
$_
:要查看上一次执行的结果,可以通过键盘上下箭头重新执行一遍代码,也可以直接$_
进行打印。它是对上一次执行结果的引用。
3.5监听元素状态改变:
右键目标元素,选择 break on
的触发条件:
-
subtree modifications
:当前节点的子节点被 移除 或者 添加 时触发断点 -
attribute modifications
:当前节点的任意属性被 添加 , 移除 或者 修改 时触发断点 -
node removal
:当前节点被 移除 时触发断点
3.6 console.log
的坑
let person = { name:'Jack', job:'worker' }; console.log(person); person.name = 'John'; console.log(person);
在使用 console.log()
打印对象的时候,需要注意它打印的是那时的快照(snapshot),所以在未展开对象的时候,打印结果符合我们的预期:
但是在展开对象后,浏览器会重新读取引用的对象本身的属性,故此时两次打印的属性都同步为最近更新的属性值:
注意这和异步同步无关。
3.7 更好的打印
带条件判断的 console.log()
可以用 console.assert()
来代替,它会在第一个参数为假值时,打印第二个参数的内容:
将变量名放在花括号中整体打印出来,变量与变量值的对应关系会更加清晰:
console.table()
可以以表格形式打印数组:
也可以以表格形式打印对象。这里以类数组对象为例:
当然这两者还可以结合起来,将一组变量直观地打印出来。
console.dir
可以将 dom 元素以 js 对象而不是 HTML 的形式打印出来:
还可以开启 log
的时间戳:
F12 --> ctrl+shift+P --> show timestamps
3.8 结构和样式调节
-
在元素面板中可以通过拖动、
ctrl+x
等直接操作 HTML 结构 -
在样式面板中可以通过点击阴影方块便捷地调节阴影效果
3.9源文件修改同步到本地文件(持久化保存):
Sources
—> Filesystems
—> Add folder to workspace
点击样式面板中的 +
可以添加新的样式规则,新增的样式规则默认放在一个单独的 CSS 文件中,可以长按 +
决定它的书写位置。
4. 真机调试
有时候,Chrome 模拟手机调试的结果不一定准确,这时候就需要用到真机调试了。真机调试允许开发者通过 Chrome Devtools 直接调试手机上的页面,我们需要的只是在 PC 和手机上安装 Chrome 浏览器,并准备一根数据线。
首先用数据线将 PC 和手机连接起来,并打开手机的 开发人员选项 ,接着打开 PC Chrome 的 chrome://inspect/#devices 页面:
将手机维持在浏览器页面,试着打开百度:
点击 inspect 会打开一个新窗口,在这里可以进行调试:
所有的操作会同时同步在 PC 端和手机端的页面上。
还有一种情况是调试本地文件,这时候需要使用 Port forwarding 端口转发功能。端口转发的前提是我们需要在本地开启一个服务器,对于平常写的 demo,用 live sever 插件或者 Node.js 开启一个服务器就好了。因为 Hexo 博客本身提供了本地服务器,我这里拿它示例。
首先通过命令行的 hexo s
开启本地服务器,然后配置一下端口转发的参数(我这里是 4000
端口)。记得勾选开启:
出现了绿点,说明配置没问题:
在地址栏输入端口地址,然后点击 inspect 看一下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。