分享高效使用 Chrome 浏览器调试前端代码的技巧-CSDN博客

640?wx_fmt=jpeg

女神镇楼

前言

相信大部分前端同学都是用 Chrome 浏览器进行开发，这篇博客要分享的基本上是除了我们常用 console.log之外的，Chrome 开发者工具控制面板提供的调试方法~

首先在地址栏敲入：about:blank 创建一个空白页，再打开控制台~

开始操作演示~（多图预警 !)

关于console

关于 console 对象，其实提供了很丰富的 API，可自查文档~

640?wx_fmt=png

关于 Console 控制面板

以下示例方法只存在于Chrome控制台Console面板~在JavaScripts中写是没有的哦!

$ 家族

$_

返回上一个被执行过的值~

640?wx_fmt=png

虽说很类似于命令行里的 !!，但是 $_ 并不会再执行一次表达式，如下图可证：

640?wx_fmt=png

如果之前的值没有保存在变量里，可以通过这个方法临时访问~（为什么说临时，因为当你执行完下一个表达式后，$_ 已经更新了哈）

640?wx_fmt=png

$0 - $4

$0、$1、$2、$3、$4 五个指令相当于在 Elements 面板最近选择过的五个引用。比如我在 Elements 面板上随意点击了掘金网站上的五个 DOM 节点。从时间线上， $4 是我第一个点击的。而 $0 是我第五个，也即是最后一个点击的。利用此方法可以快速在 Console 面板调试你选中的节点！

640?wx_fmt=png

补充一下，还有点类似正则匹配，如下所示

function replacer(match, $1, $2, $3, $4, $5) {	
  return [$1, $2, $3, $4, $5].join(' - ');	
}	
const str = 'abc12345#$*%[hello]{world}'	
    .replace(/([^\d]*)(\d*)([^\w]*)(\[.*\])(\{.*\})/, replacer);	
console.log(str); // abc - 12345 - #$*% - [hello] - {world}	
复制代码

$

类似于 document.querySelector()。不过比较少为人知的应该是它的第二个参数。指定从哪个节点开始选择。有时候想减少范围时，尤其管用！

640?wx_fmt=png

P.S. 函数签名 $(selector,[startNode])。

$$

类似于 document.querySelectorAll()，可参考同上。

P.S. 函数签名 $$(selector,[startNode])

$x

根据 XPath 表达式去查找节点。如下图示例：

640?wx_fmt=png

查找掘金站内所有含有 href 属性的 a 节点，然后遍历过滤含有 http 或 https 的节点~ 当然好像目前来说，大部分情况直接用 $、 $$ 可以覆盖，说不定特殊情况下 $x 会很有用。有需要的同学可以了解学习一下~，XPath 表达式规则可参考：www.w3schools.com/xml/xpath_s…

P.S. 函数签名 $x(selector,[startNode])