1.截屏的新姿势
当你只想对一个特别的 DOM
节点进行截图时,你可能需要使用其他工具弄半天,但现在你直接选中那个节点,打开 Command
菜单并且使用 节点截图 的就可以了。
不只是这样,你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot
命令。请注意,这里说的是全屏,并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情!
2. Snippets - 代码块的使用
我经常使用 JavaScript
作为我的自动化工具,来处理第三方网站和应用程序:
比方说,我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium
没有提供这样的总数,所以我把这个小脚本组合在一起:
?('td:last-child .sortableTable-number')
.map(el => parseInt(el.innerText))
.reduce((total, value) => total + value);
当我打开状态页并且输入这段脚本到 Console
面板的时候,它将会返回这个数值:
[图片上传失败...(image-e63a2b-1619062687910)]
<figcaption style="display: block;"></figcaption>
现在看来,即使这个脚本并没有花费我太多的精力来编写,但也只是偶尔运行一下,所以对于我来说,记住一段这样的脚本会很麻烦:
那怎么解决这个问题呢?
这就是 Snippets
的用武之地:它允许你存放 JavaScript
代码到 DevTools
中,方便你复用这些 JavaScript
代码块:
进入到 Sources
面板,在导航栏里选中 Snippets
这栏,点击 New snippet(新建一个代码块)
,然后输入你的代码之后保存,大功告成!现在你可以通过右击菜单或者快捷键: [ctrl] + [enter]
来运行它了:
3. $ 和 ?
如果你没有在 App 中定义过 $
变量 (例如 jQuery )的话,它在 console
中就是对这一大串函数 document.querySelector 的别名。
如果是 ? 就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll
并且它返回的是:一个节点的 数组 ,而不是一个 Node list
本质上来说 Array.from(document.querySelectorAll('div')) === ?('div')
,但是document.querySelectorAll('div')
和 ?('div')
哪一种方式更加优雅呢?
4. console篇 - 异步的 console
如今,越来越多与浏览器有关的 API 都是 基于 Promise
的 。当你使用 promise
的时候通常配套用 .then(处理方法)
或者 将 promise
包裹在 async
方法中,再使用 await
来接收结果。
我们在 JavaScript/TypeScript
中大量使用的东西,但如果在 Console
中书写这样的结构很不方便。
像下面这样
或者这样
这样太难用了!不是输入之前就被触发了,就是括号漏写了...
但如果
console
默认就被async
包裹呢?
你猜怎么着,还真是这样!你可以直接使用 await
:
事实上,在
Console
中使用 promise
比在源码中使用起来还要简单!
5. Request initiator 显示了调用堆栈信息
initiator
可以翻译为 启动器,但是太过生硬,大家理解意思就好。
Network
面板中的 initiator
这一列显明了是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步。但如果你用的是,例如:一个本地化的 fetch
API, 那它将会指向一些低层级的类库的代码 - 例如 当我们在 Angular
配合使用 Axios
或者 zone.js
的时候,这时指向的是 xhr.js
除了这些外部库之外,如果你希望查看代码的哪一部分触发了请求。 将鼠标悬停在显示的 initiator
(例如 外部库)上,你将看到完整的调用堆栈,包括你的文件:
6. 重新发送 XHR
的请求
如何重新发送 XHR
的请求?刷新页面?太老套了,试试这么做:
7. XHR/fetch 断点
在某一特定时刻,你想要对已发送的 “ajax”
请求进行捕获怎么做呢? 可以使用 XHR/fetch breakpoint
。
这些只能在
Source
面板中设置。(我也同样希望可以直接在Network
面板中设置,但事实并非如此)
你可以添加部分 URL
作为触发器或监听任何请求:
8. 通过 'h'
来隐藏元素
按一下 'h'
就可以隐藏你在元素面板中选择的元素。再次按下 'h
' 可以使它出现。某些的时候这很有用:例如你想截图,但你想去掉里面的敏感信息。
9. 在元素面板中展开所有的子节点
一个一个的去点击级联的 ▶
按钮太慢了,不如使用右击节点后的 expand recursively
命令:
网友评论