Chrome DevTools Tips

scola666 发布于2019-08-26 13:44 / 2476人阅读

摘要：可以用来表示当前在中的栏中查看页面信息中选中的节点表示当前选中的节点信息表示当前选中的节点的下一个节点信息表示当前选中的节点的上一个节点信息和在控制台中是方法的别名未定义的情况下，则是的方法并将结果以数组的形式返回类型的作用简单表示可以用在

$0可以用来表示当前在Chrome DevTools中的Elements栏中查看页面信息中选中的html节点

$0 表示当前选中的节点信息

$1 表示当前选中的节点的下一个节点信息

$2 表示当前选中的节点的上一个节点信息

$和$$

$在console控制台中是document.querySelector方法的别名【未定义$的情况下】，$$则是document.querySelectorAll的方法并将结果以数组的形式返回NodeList类型
$$的作用简单表示

Array.from(document.querySelectorAll("div")) === $$("div")

$_ 可以用在控制台中作为上一个值的引用直接使用，节省时间

使用

Math.random(); // 0.2505550952725395
$_ // 0.2505550952725395

搭配插件Console Importer使用，注意：有些页面受CSP安全策略影响无法使用
当需要引入某个库时，可以使用$i(npm package name); 比如：$i("lodash");提示成功后，就可以在控制台中使用lodash库提供的方法了

copy(...)

DevTools中提供的copy方法可以用来将控制台Console中任何存在的东西复制到粘贴板上

使用

msg = "asdf".repeat(3); // asdfasdfasdf
copy($_) // asdfasdfasdf

console.assert

使用console.assert断言打印自定义信息提示，如果console.assert第一个参数是falsy值则会打印自定义信息

使用

value = null;
console.assert(value,"Value is empty"); // VM5452:2 Assertion failed: Value is empty

console.table

用于将数据按照表格的形式输出，视觉上更加直观

使用

console.table(data);

console.dir

可以使用console.dir将DOM节点的详细信息和默认属性打印出来

使用

console.dir(NodeType);

Consle is Async

在Console中,要使用async await不用手动包裹一层async,可直接使用await,因为它默认已经加了Async

resp = await fetch("url");
json = await fetch("url");

monitor functions

可以用来追踪查看某个属性或方法被调用

使用

class Person {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  
  greet() {
    return this.getMessage("greeting");
  }
  getMessage(type) {
    if (type === "greeting") {
      return `Hello, I"m ${this.name}!`;
    }
  }
}
j = new Person("Json");
m = new Person("Mary");
monitor(j.getMessage); 
j.greet(); //function getMessage called with arguments: greeting
// "Hello, I"m Json!"

monitorEvent

给某个节点添加监听事件

使用

monitorEvent(nodeReference, eventName);

console.log添加css

可以自定义输出内容的样式

使用

console.log("%cHello Console

云服务器海外云主机 Chrome DevTools chrome-devtools DevTools tips

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109429.html

五种前端开发必备的调试技术

摘要：在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。移动调试断点断点方法远程映射本地调试在移动上面开发调试是很复杂的，所以就有了。在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开...

张红新 2019-08-19 14:23 评论0 收藏0
使用Chrome DevTools的Timeline分析页面性能

摘要：如果网页动画能够做到每秒帧，就会跟显示器同步刷新，达到最佳的视觉效果。下面的一条是，低于这条线，可以达到每秒帧上面的一条是，低于这条线，可以达到每秒次渲染。图中帧柱的高度表示了该帧的总耗时，帧柱中的颜色分别对应该帧中包含的不停类型的事件。原文地址：http://horve.github.io/2015/10/26/timeli... 随着webpage可以承载的表现形式更加多样化，通...

v1 2019-08-21 10:47 评论0 收藏0
正在暑假中的《课多周刊》(第1期)

摘要：正在暑假中的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。原理微信热更新方案涨知识了，热更新是以后的标配。正在暑假中的《课多周刊》(第1期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。远上寒山石径...

liukai90 2019-08-29 11:04 评论0 收藏0
正在暑假中的《课多周刊》(第1期)

摘要：正在暑假中的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。原理微信热更新方案涨知识了，热更新是以后的标配。正在暑假中的《课多周刊》(第1期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。远上寒山石径...

yintaolaowanzi 2019-08-20 10:11 评论0 收藏0
FCC 成都社区·前端周刊第 6 期

摘要：详情发布新版本中可以自动修复和合并冲突的文件，还新增了命令。详情是一个用构建设计系统的开源工具，提供了一套基础应用程序开发的工具，模式和实践。目前，只有和的最新版本支持该属性。详情每周一同步更新到欢迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改进了代码缓存...

Airy 2019-08-30 14:21 评论0 收藏0