1.Store as global
(存储为一个全局变量)
如果你在 console
中打印了一堆数据 (例如你在 App
中计算出来的一个数组) ,然后你想对这些数据做一些额外的操作比如我们刚刚说的 copy
(在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量,只需要 右击 它,并选择 “Store as global variable
” (保存为全局变量) 选项。
第一次使用的话,它会创建一个名为 temp1
的变量,第二次创建 temp2
,第三次 ... 。通过使用这些变量来操作对应的数据,不用再担心影响到他们原来的值:
2.保存堆栈信息( Stack trace
)
大多数情况下都不是一个人开发一个项目,而是一个团队协作,那么 如何准确的描述问题,就成为了沟通的关键 ,这时候 console
打印出来的堆栈跟踪的信息对你和同事来说就起大作用了,可以省去很多沟通成本,所以你可以直接把堆栈跟踪的信息保存为一个文件,而不只是截图发给对方:
代码块的使用
前言
我经常使用 JavaScript
作为我的自动化工具,来处理第三方网站和应用程序:
比方说,我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium
没有提供这样的总数,所以我把这个小脚本组合在一起:
?('td:last-child .sortableTable-number')
.map(el => parseInt(el.innerText))
.reduce((total, value) => total + value);
当我打开状态页并且输入这段脚本到 Console
面板的时候,它将会返回这个数值:
现在看来,即使这个脚本并没有花费我太多的精力来编写,但也只是偶尔运行一下,所以对于我来说,记住一段这样的脚本会很麻烦:
那怎么解决这个问题呢?
这就是 Snippets
的用武之地:它允许你存放 JavaScript
代码到 DevTools
中,方便你复用这些 JavaScript
代码块:
进入到 Sources
面板,在导航栏里选中 Snippets
这栏,点击 New snippet(新建一个代码块)
,然后输入你的代码之后保存,大功告成!现在你可以通过右击菜单或者快捷键: [ctrl] + [enter]
来运行它了:
运行其他来源的代码块
当我在 DevTools
中预设了一组很棒的代码块以后,甚至都不必再通过 Sources
来运行它们。使用 Command Menu
才是最快的方式。只需在它的输入框中输入 !
,就可以根据名字来筛选预设代码块:
console 篇 - console 中的 '$'
前言
$
作为 jQuery
的选择器,承载了一代前端的太多记忆,但是你可能没有想到的是,在我们使用 Dev Tools
进行调试的时候,$
也有大放异彩的一天呢?
1. $0
在 Chrome
的 Elements
面板中, $0
是对我们当前选中的 html
节点的引用。
理所当然,$1
是对上一次我们选择的节点的引用,$2
是对在那之前选择的节点的引用,等等。一直到 $4
你可以尝试一些相关操作(例如: $1.appendChild($0)
)
1. $
和 ?
如果你没有在 App
中定义过 $
变量 (例如 jQuery
)的话,它在 console
中就是对这一大串函数 document.querySelector
的别名。
如果是 ?
就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll
并且它返回的是:一个节点的 数组 ,而不是一个 Node list
本质上来说 Array.from(document.querySelectorAll('div')) === ?('div')
,但是document.querySelectorAll('div')
和 ?('div')
哪一种方式更加优雅呢?
2. $_
调试的过程中,你经常会通过打印查看一些变量的值,但如果你想看一下上次执行的结果呢?再输一遍表达式吗?
这时候 $_
就派上了用场,$_
是对上次执行的结果的 引用 :
3. $i
现在的前端开发过程,离不开各种 npm
插件,但你可能没有想过,有一天我们竟然可以在 Dev Tools
里面来使用 npm
插件!
有时你只是想玩玩新出的 npm
包,现在不用再大费周章去建一个项目测试了,只需要在 Chrome插件:Console Importer 的帮助之下,快速的在 console
中引入和测试一些 npm
库。
运行 $i('lodash')
或者 $i('moment')
几秒钟后,你就可以获取到 lodash / momentjs
了:
console篇 - Ninja console.log (忍者打印)
有时你设置的断点是不是被执行了太多次?假设有一个包含 200
个元素的循环,但是你只对第 110
次循环的结果感兴趣,又或者你只对一些满足某些条件的结果感兴趣,怎么办呢?这就是我们要说的条件断点:
1. Conditional breakpoints
条件断点
这样的情况下,你可以设置一个条件断点:
-
右击行号,选择
Add conditional breakpoint...(添加条件断点)
-
或者右击一个已经设置的断点并且选择
Edit breakpoint(编辑断点)
-
然后输入一个执行结果为
true
或者false
的表达式(它的值其实不需要完全为true
或者false
尽管那个弹出框的描述是这样说的)。
在这个表达式中你可以使用任何这段代码可以获取到的值(当前行的作用域)。
如果条件成立,这个断点就会暂停代码的执行:
2. The ninja(忍者) console.log
得益于条件断点, console.log
也有了新玩法:
- 每一个条件都必须经过判断 - 当应用执行到这一行的时候进行判断
- 并且如果条件返回的是
falsy
的值(这里的falsy
并非是笔误,falsy
指的是被判定为false
的值,例如undefined
),它并不会暂停..
与其在你的源码的不同地方去添加 console.log
/ console.table
/ console.time
等等,不如你直接使用条件判断来将它们“连接”到 Source
面板中。 这样的话,它们会一直执行,并且当你不再需要它们的时候,在 Breakpoints section
会清晰的列出它们。点两下鼠标你就可以把所有的都移除,就像一堆忍者一样突然消失!
这个技术在调试生产环境的问题时同样很有用,因为你通过这样的方式轻松将
console logs
插入到source
里。