乐趣区

关于chrome:chrome开发者工具02console面板

录了段视频放在 b 站了
https://www.bilibili.com/vide…
视频比文章更分明具体

1,编辑代码:

一些快捷键:
执行:enter
换行:shift enter
主动补全:tab
高低方向键:上一次输出 / 下一次输出
跳到行首 / 行尾:home / end
跳到段首断尾:ctrl home / ctrl end 或者 page up / page down

2,魔术变量

$:相当于 document.querySelector
$$:相当于 document.querySelectorAll
$0:以后选中的 DOM 元素
$_:上一次执行的后果
copy 函数:把变量复制到剪切板,复制之后 按 ctrl v 能够粘贴
留神:这些变量只是在控制台里有,开发调试时用着不便,在 js 文件里写 是不行的。

3,对象 是活的(第一次开展时的值)

4.console

打日志
console.log:信息
consolg.warn:正告
console.error:谬误
console.trace:看函数调用栈
console.time
console.timeEnd

两次调用工夫相差 1151 毫秒

console.profile
console.profileEnd: 记录性能形容信息

console.profile('test')
doSomething()
console.profileEnd('test')
function doSomething(){}

而后去 More tools -> JavaScript Profiler 能够看到相干的信息

点击点击左边的文件名能够跳转到 source 面板中代码所在的地位

5,工具栏

搜寻、菜单栏(革除、过滤、默认级别、)

6,设置

preserve log:(刷新页面时)保留日志
auto complete from history:主动补全历史数据、
selected context only:只显示以后执行上下文的日志(默认不勾选,个别状况下不要勾选)
group similar messages in console:间断打的同样的 log 只显示一行

Eager Evaluation:控制台写表达式时,显示预览后果

evaluate triggers user activation:检测触发用户激活
有一些 api 只有在用户有操作的时候能力调用,用户没有操作的时候,js 调用不执行,比方 window.open()、有声视频的自动播放;
然而控制台在默认状况下(这个按钮勾选了)没有这个限度,调用 api 能失常执行。
同一段代码,在控制台运行的成果与代码在网页中运行的成果不一样。
如果想让在控制台调试时的成果与代码在网页中运行的实际效果统一,能够把 evaluate triggers user activation 勾销勾选。

退出移动版