在我们调试 Javascript 的代码时，对象 和 方法 作为经常被我们调试的对象，所以这里介绍关于 对象 和 方法 的调试技巧。 1. queryObjects （对象查询）方法 假如我们有这样一段代码，我们在里面定义了一些对象。 问一个问题，我们怎么知道，在 特定的时刻 + 特定的执行上下文 有哪些对象呢？ DevTools 里的 queryObjec...

有时你设置的断点是不是被执行了太多次？假设有一个包含 200 个元素的循环，但是你只对第 110 次循环的结果感兴趣，又或者你只对一些满足某些条件的结果感兴趣，怎么办呢？这就是我们要说的条件断点： 1. Conditional breakpoints 条件断点这样的情况下，你可以设置一个条件断点： 右击行号，选择 Add conditional break...

如今，越来越多与浏览器有关的 API 都是 基于 Promise 的 。当你使用 promise 的时候通常配套用 .then(处理方法) 或者 将 promise 包裹在 async 方法中，再使用 await 来接收结果。 我们在 JavaScript/TypeScript 中大量使用的东西，但如果在 Console 中书写这样的结构很不方便。 像下面这...

Collectionsreject_.reject(list, predicate, [context]) Returns the values in list without the elements that the truth test (predicate) passes. The opposite of filter. predicate is t...

1. $0在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。 理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4 你可以尝试一些相关操作(例如: $1.appendChild($0)) 2. $ 和 $$如果你没有在 App 中定义过 $ 变量 (例如 jQ...

一般来说，我们会使用 console.log() 来打印某个对象，并且，两次打印之间，还会对这个对象进行修改，最后我们查看打印的结果发现，修改前的打印和修改后的打印，竟然是一样的？这样出乎意料的情况，让我们难以继续 console.log 的调试。 口说无凭，举个例子把： 我们可以看到，一共有两次打印，一次是打印原始信息，一次是打印我们修改后的信息，并且我...

前言我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分，怎么去探索更多的功能呢？ Command 菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。 如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 的话，那...

1. 切换 DevTools 窗口的展示布局一般我在使用 DevTools 时， dock 的展示窗口都在底部 ，但是有时候我想把 dock 的窗口 切换到右边。 怎么做呢？ 这时就可以通过 DevTools 的下拉菜单，或者命令菜单…或者使用一个快捷键 ctrl + shift + D (⌘ + shift + D Mac) 来实现位置的切换（通常是从 开...

在调试的过程中，我们总要对 Dev Tools 里面的数据进行 复制 或者 保存 的操作，所以我们来看看，关于这些，有什么小技巧呢？ 1. copy(...)你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源。 2. Store as global (存储为一个全局变量)如果你在 console 中打印了一堆数据 (例...

谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。 它于 2008 年首次针对 Microsoft Windows 发布，后来移植到 Linux ，macOS ，iOS 和 Android 。 浏览器也是 Chrome OS 的主要组件，它可以作为 Web 应用的平台。Chrome-wikipedia 浏览器的市场天下三分，Chorme，Sa...