12种console相关的方法。帮你快速提高调试坦克世界效率值查询

时间:?2021-09-08阅读:?182标签:?调试

我而今在调试代码的时候基础用的都是console.log() 调试法,但好用呀。理所遇到复杂点的就会借助其它工具,但日常开发中 console.log() 基础iphone16g够不够用了。

前缀铺垫的几近了,今天我们来看看 console.log() 中还有哪样鲜艳的写法。

1. 用ES6解构赋值输入变量名

如果打印多个值的,为了区别我们一般会连同变量名打印出来:

const variableX = 42;
console.log('variableX:', variableX);
// 或者
console.log(`variableX: ${ variableX }`);

其实,还有一种很简洁的方式就是使用解构的方式:

const variableX = 42;
console.log({ variableX }); // { variableX: 42 }

2. 使用适当的打印类型

console.log() 一般这样用:

console.log('no-frills log message');

但它不是唯一的类型。消息可以被分拣为information (其处理方式与console.log()同样)。

console.info('this is an information message');

警告:

console.warn('I warned you this could happen!');

错误:

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

或不太重要的调试信息:

console.debug('nothing to see here - please move along');

console.table()可以以更友好的格式输入对象的值。

const obj = {
    propA: 1,
    propB: 2,
    propC: 3
  };
console.table( obj );

或对象的数组:

const arr2 = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
  ];

console.table( arr2 );

其他选项包括:

  • console.dir( obj ) 显示一个 js 对象的交互式服务检测属性列表
  • console.dirxml( element ) 显示点名的html或XML节点的子代元素的互动树。
  • console.clear() 清除控制柜之前的所有信息。

3.过滤日志消息

冷却器以适当的颜色显示日志信息,但也可以舒张过滤,以显示特定的类型。点击控制柜窗格右下方的图标。就可以打开Chrome的侧边栏。

console.debug()信息只有在查看 verbose 选项时才会显示。

4. 使用 printf-type 的信息

所有的日志类型都可以使用c 语言风格的printf消息格式。该格式定义了一个模板,其中隐含一个变量被替换的%ios指示器。例如

console.log(
  'The answer to %s is %d.',
  'life, the universe and everything',
  42
);
// The answer to life, the universe and everything is 42.

带样式的风格

console.log(
  '%cOK, things are really bad now!',
  `
  font-size: 2em;
  padding: 0.5em 2em;
  margin: 1em 0;
  color: yellow;
  background-color: red;
  border-radius: 50%;
  `
);

6. 使用恍如测试的断言

恍如于测试的console.assert()命令可以用来在条件失利时输入一个信息。可以用一个条件和一个或多个对象来定义断言,当该条件失利时输入,例如

console.assert(
  life === 42,
  'life is expected to be',
  42,
  'but is set to',
  life
);

也可以使用一个信息和替换值。

console.assert(
  life === 42,
  'life is expected to be %s but is set to %s',
  42,
  life
);

当条件失利时,这两个选项都会显示一个断言错误。

7. 运行堆栈跟踪

可以使用 console.trace() 输入构成当前执行点的所有函数惯用的日志。

function callMeTwo() {
  console.trace();
  return true;
}
function callMeOne() {
  return callMeTwo();
}
const r = callMeOne();

跟踪显示每次惯用是哪一行,还要可以在控制柜窗格中折叠或舒张

8. 组日志消息

可以在开头使用console.group( label ) 和结尾使用 console.groupEnd() 将日志消息分成命名组。 消息组可以嵌套和折叠或舒张(console.groupCollapsed( label ) 最初显示处于折叠状态的组):

// start log group
console.group('iloop');

for (let i = 3; i > 0; i--) {

  console.log(i);

  // start collapsed log group
  console.groupCollapsed('jloop');

  for (let j = 97; j < 100; j++) {
    console.log(j);
  }

  // end log group (jloop)
  console.groupEnd();

}

// end log group (iloop)
console.groupEnd();

9. 使用在线定时器

console.time和console.timeEnd这两个方法可以用来让WEB开发人丁丈量一个JavaScript脚本程序执行消耗的时间。随着WEB应用更进一步重要,JavaScript的执行性能也逐步惨遭另眼相看,WEB开发人丁知道一些性能测试机器人总动员电影是必须的。

console.time方法是开始计算时间。console.timeEnd 是止住计时,输入脚本执行的时间。

// 起先秒表计时器在线使用
console.time('testForEach');

// (写一些测试用代码)

// 止住计时。输入时间
console.timeEnd('testForEach');

// 4522.303ms

这两个方法中都可以重生之神龙传人一个参数,作为秒表计时器在线使用的名称,它的蓝莓的功效与作用是在代码互相运行时分复用清楚各个秒表计时器在线使用。对console.timeEnd的惯用会立即输入执行总共消耗的时间,单位是微秒。

10. 按名称调试和监控函数

DevTools Sources 面板(或 Firefox 中的调试器错误解决方法)容许打开一个文件,并通过单击word行号设置断点。基于chrome的冷却器也容许你通过在控制柜中输入debug(functionName)来设置断点,例如:

debug( doSomething );

该函数必须在全局命名盗梦空间中可用,还要冷却器将在惯用它时立即起先调试器错误解决方法。可以使用undebug(functionName)或重新加载页面来取消调试。

monitor(function),它接收一个函数名作为参数。比如function a,每次a被执行了,都会在控制柜输入一条信息。里面隐含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来止住这一监听。

11. 查找和修复事件料器

Firefox DevTools Inspector 面板会在任何附加了处理程序的DOM元素旁边显示一个 event 图标。单击图标查看函数名,然后单击左边的箭头图标舒张代码。或者,“在调试器错误解决方法中打开”图标将在“调试器错误解决方法”窗格中定位处理程序,为着可以设置断点

Chrome的实现没有那么好,但可以通过getEventListeners()函数传递一个DOM节点来查看所有事件料器。getEventListeners($0)显示应用于当前Elements面板中高亮显示的DOM节点的网络监听

12. 复制属性到剪贴板

控制柜的copy()命令可以复制任何值到剪贴板。它可以是一个原始值。对象或DOM节点。

当传递一个DOM节点时,copy()将该元素及其所有子元素的html放在剪贴板上。这与右键点击一个节点并选择复制。然后选择复制外层HTML是一色的。

命令 copy( document.documentElement ) 复制整个 HTML 文档。 这可以粘贴到文本编辑器中并舒张鼓吹增强可读性统计信息。

原文:https://blog.openreplay.com/12-ways-to-improve-your-devtools-console-logging
站长推荐

1.云服务推荐: 国内主流云投资商,各项云产品的问道,淘宝优惠券怎么设置领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10663

js检测开发者选项在哪里工具是否打开,防止别人恶意调试我们的代码

网站如何检测到是否开启开发者选项在哪里工具?这里不是指监听键盘事件F12之类的方法,而是通过冷却器右侧点击打开开发者选项在哪里工具。而今介绍2个方法,可以检测到你是否开启了控制柜程序,可以算是JavaScript的一些奇淫巧技。将如下这段代码加入你的网站便可。

使用 tap 来快速 debug

在这里 tap 是一个可以用来快速调试。链式惯用,还可以打印任何你想打印的东西的函数。何以我们不用 console.log 这个老方式了?

旺球体育在线常用的几个Js调试技巧

除了console.log, debugger是我们最喜欢,快速且污痕的调试工具;可以通过console.log查看并滚动浏览,亦或者使用console.table舒张,更容易察看正在处理的内容!

九大Java性能调试工具

NetBeans剖解器是NetBeans的扩展。用于为NetBeans IDE提供剖解多功能洒水车。NetBeans IDE是一个开源的集成开发环境环境。NetBeans IDE支持开发所有Javac#应用程序设计教程类型(Java SE(包括JavaFX)。Java ME。EJB和移动c#应用程序设计教程)

chrome的F12调试刷新或者内部跳转network日志消失的解决公文办法的格式

开发者选项在哪里工具的Network面板中面有一个Preserve Log选项,勾选上便可,如果没有勾选,跳转页面或者刷新页面,之前的http请求日志都会被清空,勾选上,就会保留所有的日志信息。

14个你可能不知道的JavaScript调试技巧

以更快的速度与激情4和更高的坦克世界效率值查询来调试JavaScript。熟识工具可以让工具在工作中发挥剑问情更大的蓝莓的功效与作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug。

vConsole_vue移动端调试

当我们在冷却器开发vue页面时,由于冷却器对于调试有天然的支持,我们开发起来很方便。但是而今已经进入了移动端时代。移动端页面的需求更进一步大。在开发移动端页面的时候我们通常是在冷却器不负众望开发不负众望

10个用Console来Debug的高级技巧

在畴昔的十年中,我最热衷的事情之一就是旺球体育在线开发(特别是JavaScript)。作为一个匠人,我可以专研各族工具。在本文,我会为你介绍一些用老式console来debug的技巧。

JS反调试技术

本文简单收束一下日常使用到的JS反调试技术,主要目的怎么读防止非法用户查看美女网页游戏运行流程,剖解代码。虽然不是千万安全的。但也在特定程度上提高了调试破解的难度。在Chrome冷却器中,最常用到的就是DevTools工具舒张调试JS

JS断点调试,必备的javaScript的debug调试技巧

断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开冷却器,打开sources找到js文件,游刃有余号上点一下罢了文言文。本文主要介绍了“逐句子执行”按钮,“逐过程执行”按钮,console控制柜这三个傻boy工具,以及调试bug时的一些思路。

点击更多...

内容以同享,参考。研究为目的怎么读,不存在任何商业目的怎么读。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将赋予删除!

Baidu