textchrome控制台调试技巧(代码片段)

author author     2022-11-30     403

关键词:

#### 1. `console.group(‘name’)` and `console.groupEnd(‘name’)`

As the name suggests it will group multiple logs in one single expandable group, you can even nest them if you’d like to further group them. `console.group(‘groupName’)` starts the group and `console.groupEnd(‘groupName’)` closes a group. There is a third function `console.groupCollapsed` which creates the group in collapsed mode.

#### 2. `console.trace()`
When you need to find the whole call stack of a function, console.trace is super useful, I use this mostly to find from where callback is passed, it will print the whole stack-trace. Let’s take an example:

  ```js
  function foo() 
    function bar() 
      console.trace();
    
    bar();
  
  foo();
  ```
#### 3. `console.count(“counter: ”)`
I use this so much, mostly to find how many times a component is rendered in react. As you can guess this will log the total count of the number of times it was executed. Remember if you change the string which is logged, it will start a new counter for that string, we also have a handy function to reset the `counter: console.countReset(‘Counter’)`, the name should match though.

#### 4. `console.time()` and `console.timeEnd()`

`console.time()` will start a timer and will end it once `timeEnd()` is called, they are mostly used when you need to do performance check. You can also pass a string to time and timeEnd and it will start another timer of that name.

#### 5. `console.assert()`

So let’s say you need to check if some expression/value ever becomes false, and when it does you want it to be logged, now you would normally wrap this is an if-else, but no need to do that console.assert does the job for you, you need to pass the condition first and message/object as 2nd param. Let’s check the following example

```js
function greaterThan(a,b) 
  console.assert(a > b, "message":"a is not greater than b","a":a,"b":b);

greaterThan(2,1);
```
#### 6. `console.profile([label])`

How many times have you wished if you could start profiling when it is needed instead of keeping it on from start and then manually finding the point which you needed to profile. Well, `console.profile()` comes to rescue. when you are done profiling just call `console.profileEnd()`, let’s take an example:

  ```js
  function thisNeedsToBeProfiled() 
    console.profile("thisNeedsToBeProfiled()");
    // later, after doing some stuff
    console.profileEnd();
  
  ```
this will log and add in profiles panel.

#### 7. `console.timeStamp([label])`

Adds an event to the Timeline during a recording session. I use this to mark places where the API call returned and when was the data processed, there are many use cases for this though.

```js
console.timeStamp('custom timestamp!');
```

#### 8. `console.clear()`

This is pretty clear(pun intended), it clears the console, nothing much here.

#### 9. `console.memory`

This is not a function, but a property which stores your HeapSize, when perf is tricky and graphs are hard to read, simply logging the memory might help.

#### 10. `console.table(array)`

This is my fav. and best trick, it prints a slick table, with which you can interact, you need to pass an array of object to it.

chrome调试技巧(代码片段)

console基本输出想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:console.log("打印字符串");//在控制台打印自定义字符串console.error("我是个错误");//在控制台打印自定义错误信息console.info("我是个信息");//在... 查看详情

javascript调试技巧(代码片段)

...ir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们 查看详情

javascript调试技巧(代码片段)

...ir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们 查看详情

textchrome主题脚本(代码片段)

查看详情

textchrome脱机安装包(代码片段)

查看详情

textchrome删除自动填充网址(代码片段)

查看详情

chrome调试技巧(代码片段)

...自明。 2、console基本输出想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:1.console.log("打印字符串");//在控制台打印自定义字符串2.console.error("我是个错误");//在控制台打印自定义错误信息3.console.info("... 查看详情

textchrome检查员xpath测试员(代码片段)

查看详情

lua-调试技巧(代码片段)

title:lua-调试技巧categories:Luatags:[lua,调试,技巧]date:2022-07-1416:31:27comments:falsemathjax:truetoc:truelua-调试技巧前篇游戏lua脚本调试技巧,达到修改逻辑脚本后能实时生效执行,提高开发效率pc端editor模式新建一个测试代码脚本gDebugCustom=gD... 查看详情

lua-调试技巧(代码片段)

title:lua-调试技巧categories:Luatags:[lua,调试,技巧]date:2022-07-1416:31:27comments:falsemathjax:truetoc:truelua-调试技巧前篇游戏lua脚本调试技巧,达到修改逻辑脚本后能实时生效执行,提高开发效率pc端editor模式新建一个测试代码脚本gDebugCustom=gD... 查看详情

lua-调试技巧(代码片段)

title:lua-调试技巧categories:Luatags:[lua,调试,技巧]date:2022-07-1416:31:27comments:falsemathjax:truetoc:truelua-调试技巧前篇游戏lua脚本调试技巧,达到修改逻辑脚本后能实时生效执行,提高开发效率pc端editor模式新建一个测试代码脚本gDebugCustom=gD... 查看详情

console调试技巧(代码片段)

...端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多实用的方法,这些方法可以使我们的调试过程更... 查看详情

textjavascript和jquery调试技巧(代码片段)

查看详情

实用调试技巧(代码片段)

调试技巧调试是什么?有多重要?一、调试的基本步骤二、Debug和Release的介绍。三、学会快捷键四、调试的时候查看程序当前信息五.实例实例一实例二六.如何写出好(易于调试)的代码示范注意七.编程常见错误... 查看详情

gdb调试基本技巧(代码片段)

1 说明本文主要介绍一些简单的、常用的gdb调试技巧。环境:GNUgdb(GDB)RedHatEnterpriseLinux(7.2-60.el6_4.1)参考文档:《gdb调试技巧》 作者不详2 测试代码1#include<stdio.h>23inttest_func2(void)45inta=1;6intb=2;78returna+b;91011v 查看详情

javascript调试技巧

...码中添加debugger,浏览器会自动在debugger那里停住三、在控制台输入debug(car.funcY)。if(thisThing){debugger;}4 查看详情

浏览器控制台调试工具console(代码片段)

浏览器控制台调试函数console技巧汇总一、基本功能二、断言与统计1.断言2.行数计算3.重置计数3.打印对象,以列表形式输出对象属性三、js性能统计1.性能分析,打印执行性能情况2.输出代码的执行时间3.显示内存信息4.标... 查看详情

dockerdebug调试技巧(代码片段)

 『重用』容器名但我们在编写/调试Dockerfile的时候我们经常会重复之前的command,比如这种dockerrun--namejstorm-zookeeperzookeeper:3.4,然后就容器名就冲突了。$dockerrun--namejstorm-zookeeperzookeeper:3.4...$dockerrun--namejstorm-zookeeperzookeep 查看详情