（前端百科加星，提升前端技能）
作者：前端劝阻弟子公众号/前端劝阻弟子（本文由作者贡献）
前言
本文尚未介绍“性能”面板。
稍后会单独发表文章，目录如下：
常用命令及调试
黑盒脚本： 黑盒脚本
控制台内置命令
远程调试WebView
1. Chrome Devtools的使用 2. 菜单面板的拆解
三、常用命令及调试 1、调出快捷命令面板：cmd+shift+p
打开 Devtools，输入 cmd + shift + p 将其激活，然后开始在栏中输入您要查找的命令或输入“？”登录以查看所有可用命令。
1.性能监视器：>性能监视器
性能监视器将与 CPU、JS 堆大小和 DOM 节点等相关信息一起显示。
2. FPS实时监控性能： > FPS选择第一项
3. 截取单个元素的屏幕截图：> 屏幕选择“捕获节点屏幕截图”
2.DOM断点调试
当您想要调试特定元素的 DOM 中的更改时，可以使用此选项。这些是 DOM 更改断点的类型：
如上图：监听表单标签，当输入框获得焦点时触发断点调试。
3.黑盒脚本：黑盒脚本
删除多余的脚本断点。
例如，来自第三方（Javascript 框架和库、广告等）的堆栈跟踪。
为了避免这种情况并专注于核心代码，请在“源”或“网络”选项卡中打开文件，右键单击并选择 Blackbox Script
。
4.事件监听器：事件监听器断点
单击“来源”面板
ExpandEvent 侦听器断点
选择监听事件类别并触发事件启用断点
如上图：监听到键盘输入事件后，会跳转到断点处。
5.本地覆盖：本地覆盖
用我们自己的本地资源覆盖网页使用的资源。
同样，如果在Chrome开发者功能中使用DevTools工作区设置持久化、将本地文件夹映射到网络、修改CSS样式等，本地文件会被直接修改，页面会重新加载，使用的资源也会是本地资源。达到持久的效果。
6.扩展：本地覆盖模拟Mock数据
来自：chrome开发者工具-本地覆盖
对于返回json数据的接口，可以使用该函数简单模拟返回数据。
例如：
对象或数组类型，从而覆盖原来的接口请求。
4. 控制台内置命令
可以执行常见任务的函数，例如选择 DOM 元素、触发事件、监视事件、在 DOM 中添加和删除元素等。
这就像Chrome本身实现的jquery的增强版本。
1. $(selector, [startNode])：单个选择器
document.querySelector 的缩写
语法：
$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();
控制台还会提前查询对应的标签，非常贴心。
还可以触发事件，例如暂停播放：
该函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。该参数的默认值是文档
2.$$(选择器,[startNode])：全选择器
document.querySelectorAll 的缩写，返回数组标签元素
语法：
$$('.button')
您可以使用循环切换到所有选择
或者打印属性
该函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。该参数的默认值是文档
用法：
var images = $$('img', document.querySelector('.devsite-header-background'));
for (each in images) {
console.log(images[each].src);
}
3. $x(path, [startNode])：xpath选择器
$x(path) 返回与给定 xpath 表达式匹配的 DOM 元素数组。
例如，以下代码返回
页面上的所有元素：
$x("//p")
以下代码返回
所有包含元素的元素：
$x("//p[a]")
Xpath多用于爬取，前端同学可能不太熟悉。
4. getEventListeners(object)：获取指定对象的绑定事件
getEventListeners(object) 返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个注册事件类型（例如，单击或按键）的数组。每个数组的成员都是描述为每种类型注册的侦听器的对象。
用法：
getEventListeners(document);
相比在监听面板中查看事件，这个API方便得多。 5.精美的控制台
除了不同级别的警告和错误打印
还有其他非常有用的打印选项。
1. 变量打印：%s、%o、%d 和 %c
const text = "文本1"
console.log(`打印${text}`)
除了标准的 ES6 语法之外，实际上还支持四种类型的字符串输出。
他们是：
console.log("打印 %s", text)
还有一个特殊的%c，可以用来重写输出样式。
console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')
当然，你也可以与其他组合使用（注意占位符的顺序）。
const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)
你也可以这样玩：
console.log('%c Auth ',
'color: white; background-color: #2274A5',
'Login page rendered');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A',
'Get user details');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'Error getting user details');
2. 打印物体的技巧
当我们需要打印多个对象时，我们往往会一一输出。并且看不到对象名称，不利于阅读：
过去，我的方法是这样打印：
console.log('hello', hello);
console.log('world', world);
这显然有点笨拙和麻烦。事实上，输出还支持对象解构：
console.log({hello, world});
3.布尔断言打印：console.assert()
当您需要在评估某些条件时进行记录时，这非常有用。
语法
console.assert（assertion，obj）
用法
const value = 1001
console.assert(value===1000,"value is not 1000")
4. 对控制台进行分组：console.group()
当您需要将详细信息分组或嵌套在一起以便轻松阅读日志时，请使用此功能。
console.group('用户列表');
console.log('name: 张三');
console.log('job: 前端');
// 内层
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在职');
console.groupEnd(); // 结束内层
console.groupEnd(); // 结束外层
5、测试执行效率：console.time()
不如 Performance API 准确，但更易于使用。
let i = 0;
console.time("While loop");
while (i < 1000000) {
i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
// For Loop
}
console.timeEnd("For loop");
6.输出表：console.table()
这适用于打印数组对象。 。 。
let languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
7.打印DOM对象节点：console.dir()
打印出这个对象的所有属性和属性值。
console.dir() 和 console.log() 之间的区别并不明显。如果用于打印字符串，输出将完全相同。
console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;
输出对象时，唯一的区别是显示（log被识别为字符串输出，dir直接打印对象。）。
唯一显着的区别在于打印 DOM 对象：
console.log(document)
console.dir(document)
一种打印纯标签，另一种输出 DOM 树对象。 6.远程调试WebView
使用 Chrome 开发者工具调试本机 Android 应用中的 WebView。
配置 WebView 进行调试。
在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
打开手机上的USB调试并将其插入电脑。
在 Chrome 地址栏中输入：Chrome://inspect
通常，当您在App中打开WebView时，Chrome会监控并显示您的页面。
点击页面下方的inspect，可以实时查看手机上WebView页面的显示状态。 （第一次使用可能会出现白屏，因为需要去那里下载文件）
除了检查选项卡之外，还有焦点选项卡：
其他应用中的WebView也可以使用。例如，这是一个也使用网页的应用程序中的游戏：
参考
实用的 Chrome 开发者工具——常用命令和调试
移动网络专家——远程调试
控制台实用程序 API 参考
控制台 API 参考
本网站每日更新互联网创业教程，一年会员只需98，全站资源免费下载点击查看会员权益
