1、Chrome控制台小技巧
-
打开和关闭抽屉式选项卡:按Esc键可打开和关闭 DevTools 的 Drawer(抽屉式选项卡)
- 在Drawer(抽屉式选项卡)中,你可以在 Console 控制台中执行命令,查看动画检查器(Animations),配置网络条件(network conditions)和渲染(rendering)设置,搜索(search)字符串和文件等
-
使用Request blocking 阻塞请求:
- 使用这个功能可以拦截请求;
- 比较常用的场景是,页面执行完某操作后页面就进行重定向跳转了,这时如果想调试重定向前发的请求做了啥,就可以使用此功能进行阻塞拦截
-
debugger
:代码手动编程设置断点调试; -
Coverage
代码覆盖率检测:可以观察到代码覆盖率,哪些是没用的,去除无用代码,较少代码体积 -
Changes
变化:显示更改代码的比较,可以通过这个工具观察你用控制台修改过的代码,类似于git 的 diff 功能类似,红色代表删除、绿色代码新增; -
Snippets
:在 console 里可以临时运行代码,但是书写格式不太友好,而且一换行就执行了(虽然可以 shift+enter 换行),不想打开代码编辑器怎么办,可以使用 Snippets 这个工具创建js脚本,并可以访问和从任何页面的Chrome DevTools面板中执行(除非你删除)。
2、console控制台命令
-
$_
:返回最近一次计算的表达式的值; -
$(selector):
返回匹配指定CSS选择器的第一个DOM元素的引用,实际是document.querySelector()函数的别名; -
$$(selector)
:$\$(selector)返回一个与给定CSS选择器匹配的元素数组,等效于调用document.querySelectorAll(); -
$x(path)
:返回一个与给定XPath表达式匹配的DOM元素的数组; -
clear()
: 清除控制台中所有历史记录; -
copy(object)
:将指定对象的字符串表示复制到剪贴板; -
debug(function)
:当调用指定的函数时,调试器被调用并在Sources(源文件)面板上的函数内部断点暂停; -
dir(object)
:Console API的console.dir()方法的别名。 -
getEventListeners(object)
返回在指定对象上注册事件的监听器 -
keys(object)
返回一个数组,该数组包含属于指定对象的属性名; -
values(object)
:回一个数组,该数组包含属于指定对象的属性值; -
document.body.contentEditable=true
:将浏览器变成编辑器 -
monitorEvents(document.body, "click")
:第一个参数是要监听的对象。如果未提供第二个参数,所有事件都会返回。要指定要监听的事件,传递一个字符串或字符串数组作为第二个参数; -
unmonitorEvents(document.body)
:停止监听body对象上的事件;
3、console API详解
- 有开发就有console,开发调试必使用的一大命令console,看看都有些啥?
(1)输出信息基本方法:
- console.log 用于输出普通信息
- console.info 用于输出提示性信息
- console.error用于输出错误信息
- console.warn用于输出警示信息
- console.group&&console.groupEnd分组输出,console.groupCollapsed创建新分组
console.group('warn警告信息')
console.warn('warn1')
console.warn('warn2')
console.warn('warn3')
console.groupEnd()
console.group('info信息')
console.warn('info')
console.warn('info1')
console.groupEnd()
console.group('log信息')
console.warn('log1')
console.warn('log2')
console.groupEnd()
console.group('error信息')
console.warn('error1')
console.warn('error2')
console.groupEnd()
- 给console输出添加样式(通过背景属性图片也可以输出哦)
['log','info','warn','error'].forEach(item => {
let $print = console[item];
console[item] = function() {
$print.call(console, '%c'+Array.prototype.slice.apply(arguments).join(' '), 'font-size: 16px;padding:10px;font-weight: bold;text-decoration: underline;')
}
})
(2)复杂类型输出:
-
console.dir | console.dirxml
:替代for in详细的输出对象信息,经常遇到的坑点是,使用console.log想打印出对象信息,发现只有[object Object]
,现在可以使用dir;dirxml
如果可以会使用xml形式打印。
let obj = {
test_1: 'ffff',
test_2: '这是test',
fn: () => {
console.log('fn')
},
arr_1: [1,{a: 'arr_obj'}, 'string']
}
console.group('log打印对象')
console.log(obj)
console.groupEnd()
console.group('dir打印对象')
console.dirxml(obj)
console.groupEnd()
console.group('dirxml打印对象')
console.dirxml(obj)
console.groupEnd()
console.group('log打印数组')
console.log(obj.arr_1)
console.groupEnd()
console.group('dir打印数组')
console.dirxml(obj.arr_1)
console.groupEnd()
console.group('dirxml打印数组')
console.dirxml(obj.arr_1)
console.groupEnd()
- 有时候对象或者数组数据过多,要是能表格形式直观展示就perfect,
console.table
满足你
let obj = {
test_1: 'ffff',
test_2: '这是test',
fn: () => {
console.log('fn')
},
arr_1: [1,{a: 'arr_obj'}, 'string']
}
console.group('table打印')
console.table(obj)
console.groupEnd()
(3)其他调试输出:
-
计算某段程序运行时间:
-
console.time('time')
计时开始 -
console.timeEnd('time')
计时结束
-
-
计算某段程序运行时CPU使用相关信息(统计结束后信息记录在JavaScript Profiler面板):
-
console.profile('profile')
监听开始 -
console.profileEnd('profile')
监听结束
-
- 条件输出(断言输出,如果计算表达式返回false时,向控制台写入一个error):
console.assert(false, '为false时才输出')
console.assert(true, '为true时不输出')
-
console.count('fn执行次数:')
统计代码执行次数的必备; -
console.timeLine
、console.timeLineEnd
记录一段时间轴 -
console.clear()
:清空控制台 -
console.debug()
:使用方式和console.log
一样 -
console.timeStamp()
:在记录会话期间向Timeline(时间轴)面板添加一个事件 -
console.trace(‘test’, obj)
:在调用该方法的地方打印堆栈跟踪。
“积跬步、行千里”—— 越来越懒的自己,回来吧!态懒可不太好。喜欢的话留下个赞和关注哦!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。