About 控制台

崽崽ya
86 阅读5分钟
  • cope(...)

可以通过全局的方法copy()在console里复制任何能拿到的资源

  • cope($_)

对上次执行的引用

  • cope($0)

$0是对我们当前选中的html节点的引用，$1 是对上一次我们选择的节点的引用， $2 是对在那之前选择的节点的引用，等等。一直到 $4。也可以尝试以下操作$1.appendChild($0)

  • $i

用来下载包，chrome有Console Importer插件以后就可以下载所有的npm包， 首先安装 Console Importer 插件，可以打开这个网址下载chrome.google.com/webstore/ca…
之后就可以下载 包使用了。 例：下载dayjs，运行$i('dayjs')，就可以下载dayjs了。

  • $ 和 $$

如果没有在app中定义过$变量(例如jquery)的话，它就相当于document.querySelector 的别名。$$他不仅仅执行document.querySelector  并且它返回'一个节点的数组，而不是一个node list' 虽然从本质上来说 Array.from(document.querySelectorAll('div')) === $$('div')

docQueryAll.gif

  • console.table console.table可以将数组(或者类数组的对象，或者就是一个对象)打印成表格，且表格可缩放可排序。如果只想要展示你想要展示的列。那么可以使用第二个参数，传入你想要展示的列的名字。

console_table.gif

  • console.assert

当判断某个值为假的时候(空字符串，undefined，null)，可以使用console.assert。

当我们传入的第一个参数为假的时候，console.assert打印跟在这个参数后面的值。

如果你使用的 `NodeJS` 版本 `≤ 10.0` ， `console.assert` 可能会中断后面代码的执行，但是在 `.10` 的版本中被修复了(当然，在浏览器中不存在这个问题)
  • Store as global(存储为一个全局变量)

在console打印数据之后，想在不影响它原来值的情况下，对他进行一些操作。 可以右击打印的值，选择Store as global variable 保存为全局变量选项。 第一次使用的话，会创建一个名为‘temp1’的变量，第二次创建temp2，以此类推。

  • console.log({}) 当你要打印多个变量的时候，可以使用console.log({})把需要打印的内容放在大括号里。这样就可以提高他的易读性。

     原理是因为es6中增强的对象字面量，只要加上{}就可以实现

  • console.table({})

可以上面两者结合，打印出来表格形式的数据。

console_table_obj.png

  • console.dir

可以用来查看这个节点所关联到的真实的js对象

  • 给console.log加上css样式

在打印文本的时候 可以所要打印的文本的前面加上%c，那么console.log的第二个参数就变成了了css了。

console.log('%c FE-Wingman! ', 'background: #222; color: #FFFFFF;font-size:3rem');
  • Storage 系统的占用数 和 空闲数

await navigator.storage.estimate()

  • 设备的电池信息

await navigator.getBattery()

  • 媒体能力

Mefia Capabilities 让开发者获取到用户设备/系统/浏览器解码能力的信息。作为前端工程师再为用户选择媒体流时可以做出最佳决策。

const query ={type:'file',audio:{contentType:'audio/ogg'}}
await navigator.mediaCapabilities.decodingInfo(query)
  • Cache storage(浏览器缓存)
  1. 只能魂村静态资源，只用缓存用户的get请求；
  2. 缓存不会过期，但是因为浏览器对他的大小有限制，所以需要定期清理；
  3. 对不受信任的源(不使用HTTPS)使用SecurityError reject--可以在Firefox Devtools选择/齿轮菜单中通过选择'通过http启用service workers(当工具箱打开时)'选项来绕开这个限制。

缓存的过程会做的三件事

  1. 缓存网页数据
  2. 把缓存的数据存起来
  3. 监听用户的请求动作，返回缓存的数据 这些过程中： Service Worker 负责监听用户的动作，捕获各种事件， Cache storage 负责存取数据。（为了不影响页面的正常渲染过程， Service Worker 在另一个线程中运行。）

我们可以直接在浏览器中这样访问cache对象：await caches.keys();
使用await是因为Service worker的api几乎都是封装的promise。

  • 条件断点
let result = 0;
Array.from(Array(150)).map(Math.random).forEach((vaule, index) => {
    result += v * index
})

打断点的时候，如果想要的值是在断点的值的中间的话。（包含100个元素但是只想要第50次的循环结果）

  1. 右击行号，选择 Add conditional breakpoint...(添加条件断点)
  2. 或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
  3. 然后输入一个执行结果为 true 或者 false 的表达式（它的值其实不需要完全为 true 或者 false 尽管那个弹出框的描述是这样说的）。
  • log- 时间戳

ctrl+p 输入>Show timestamps 开启时间戳。或者按F1 开启 或者在调试工具中的 ⋮ 下拉中找到它。

  • 监测执行时间
  1. console.time() — 开启一个计时器
  2. console.timeEnd() — 结束计时并且将结果在 console 中打印出来
  3. 如果你想一次记录多件事，可以往这些函数中传入不同的标签值。(例如: console.time('loading')
  • 让 console.log 基于调用堆栈自动缩进 配合 Error 对象的 stack 属性，让你的 log 可以根据堆栈的调用自动缩进：
function log(message) {
    console.log(
        // 这句话是重点当我们 new 出来的 Error 对象时，会匹配它的stack 信息中的换行符，换行符出现的次数也等同于它在堆栈调用时的深度。
        ' '.repeat(new Error().stack.match(/\n/g).length - 2) + message
    );
}

function foo() {
    log('foo');
    return bar() + bar();
}

function bar() {
    log('bar');
    return baz() + baz();
}

function baz() {
    log('baz');
    return 17;
}

foo();

运行结果如下：

console_stack.png

  • 保存堆栈信息(Stack trace)

如何打印出来的堆栈追踪信息--》可以右击报错或者值 选择Save as 点击save 保存即可

save_log.gif

  • Cope HTML

在控制台的源码页面，右击或者点击在html元素边上的省略号(...) 就可以将当前元素复制到剪贴板中。

  • Capture node screenshot(截取节点屏幕截图)

点击要截图的dom。右击选择Capture node screenshot 即可截图当前dom的图片。

  • 修改控制台位置

ctrl+p 之后输入>dock to left 或者>dock to bottom 或者>dock to right 可以切换控制台的位置

  • 无聊的知识(查看当前页面内p标签包含的文字总数)
$$('p')
    .map(el => parseInt(el.innerText.length))
    .reduce((sum, value) => sum + value)

这一类型的脚本(不经常使用的一些脚本)可以存入javascript代码到devTools中，方便下一次使用

  1. 进入到 Sources 面板
  2. 在导航栏里选中 Snippets 这栏
  3. 点击 New snippet(新建一个代码块)
  4. 输入你的代码之后保存

大功告成！现在通过右击菜单或者快捷键： [ctrl] + [enter] 来运行你刚刚保存的脚本吧。后续也可以给他取一个好记的名字(右击选择rename)，之后使用ctrl+p 在输入框输入他 的名字就可以根据名字来筛选预设代码块了。

avatar
文章
阅读
粉丝