Javascript高级之console调试

JS错误处理

• 错误类型

  • Error - 表示普通错误，其余6种类型的错误对象都继承自该对象
  • EvalError - 调用eval()函数错误，已经弃用，为了向后兼容，低版本还可以使用
  • RangeError - 数值超出有效范围，如"new Array(-1)"
  • ReferenceError - 引用了一个不存在的变量，如"var a=1;a+b;"（变量b未定义）
  • SyntaxError - 解析过程语法错误，如"{;}" "if()" "var a=new;"
  • TypeError - 变量或参数不是预期类型，如调用了不存在的函数或方法
  • URIError - 解析URI编码出错，调用encodeURI()、escape()等URI处理函数时出现

• 错误处理：发生错误时，保证程序不中断

    try{
        可能发生错误的代码
    }catch(err){//err中发生错误时会自动收到创建的error对象
        err.message: 保存了错误的详细原因
        err.name: 保存了错误对象的名称
    如果发生错误，才执行的错误处理代码
    }[finally{
    无论是否发生错误，都执行的代码
        *一定会在退出*之前*执行*
        一般释放用过的对象资源：xxx=null
    }]

• 手动抛出错误对象

    try{
        // 创建错误对象
        var err = new Error('自定义错误信息');
        // 抛出错误对象
        // 也可以与上一行合并为：throw new Error('自定义错误信息');
        throw err;
    }catch(err){
        // 输出结果，自定义错误信息
        console.log(err.message);
    }

• 执行效率
  • 如果可以提前预知错误的原因：建议使用if代替try catch
  • try中尽量少的包含代码，try的执行效率低，且多创建一个error对象

Source面板调试

• Source面板调试工具
  • Watch - 可以对加入监听列表的变量进行监听
  • Call Stack - 函数调用堆栈，可以在代码暂停时查看执行路径
  • Scope - 查看当前断点所在函数执行的作用域内容
  • Breakpoints - 查看断点列表
  • XHR Breakpoints - 请求断点列表，可以对满足过滤条件的请求进行断点拦截
  • DOM Breakpoints - DOM断点列表，设置DOM断点后满足条件时触发断点
  • Global Listeners - 全局监听列表，显示绑定在window对象上的事件监听
  • Event Listener Breakpoints - 可断点的事件监听列表，可以在触发事件时进入断点

JS中的console对象

• 概述
  • JavaScript中的console对象可用于访问浏览器调试控制台
  • 可以用它在控制台中输出代码中变量的值

console对象

console.log()

• 说明
  • 这个方法主要用于将传给它的值输出到控制台
  • 可以给log()传递任何类型
    • 字符串
    • 数组
    • 对象
    • 布尔值
    • ...

console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});

console.info()

• 说明
  • console.log 别名，输出信息

console.info("runoob");

console.error()

• 说明
  • 这个方法在测试代码时非常有用
  • 它用于将错误输出到浏览器控制台
  • 错误消息默认用红色突出显示

console.error('Error found');

console.warn()

• 说明
  • 这个方法用于向控制台抛出警告
  • 警告消息默认以黄色突出显示

console.warn('Warning!');

console.clear()

• 说明
  • 这个函数用来清除控制台
  • 如果控制台中充满了消息和错误信息，可以用它清除控制台
  • 并在控制台中显示一条消息：Console was cleared

console.clear()

console.trace()

• 说明
  • 追踪函数的调用过程

function d(a) { 
  console.trace();
  return a;
}
function b(a) { 
  return c(a);
}
function c(a) { 
  return d(a);
}
var a = b('123');

console.assert()

• 说明
  • assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串
  • 只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果

console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立

console.time() 与 console.timeEnd()

• 说明
  • 这两种方法要相互结合使用
  • 每当我们想知道一个代码块或函数所花费的时间时，都可以用time()和timeEnd()方法
  • 这两个函数都以字符串作为参数
  • 使用时要对这两个函数用相同的字符串来测量时间

console.time('timer'); 
const hello =  function(){
  console.log('Hello Console!');
}
const bye = function(){
  console.log('Bye Console!');
}
hello(); // calling hello();
bye(); // calling bye();
console.timeEnd('timer');

console.table()

• 说明
  • 这个方法可以在控制台中生成一个表格，能够提高可读性
  • 它可以自动为数组或对象生成一个表

console.table({a: 1, b: 2, c: 3}); 

console.count()

• 说明
  • 可以在循环中用它来检查特定的值使用了多少次

for(let i=0; i<3; i++){
  console.count(i);
}

console.group() 和 console.groupEnd()

• 说明
  • group()和groupEnd()可以让我们把内容分组到一个单独的块中
  • 就像time()和timeEnd()一样，它们需要以相同值的标签作为参数
  • 你还可以对组执行展开或折叠操作

console.group('group1'); 
  console.warn('warning'); 
  console.error('error'); 
  console.log('I belong to a group'); 
console.groupEnd('group1'); 
console.log('I dont belong to any group');

为你的日志添加样式

• 说明
  • 还可以在控制台日志添加样式，使日志看起来更漂亮
  • 只需要把CSS样式作为log()函数的第二个参数，同时第一个参数以％c开始即可

const spacing = '10px'; 
const styles =  `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`; 
console.log('%cI am a styled log', styles);

占位符格式

• console支持printf的占位符格式
  • %s 字符串
  • %d or %i 整数
  • %f 浮点数
  • %o 可展开的DOM
  • %O 列出DOM的属性
  • %c 根据提供的css样式格式化字符串

字符串

console.log("%d年%d月%d日",2020,12,26);
// 2020年12月26日

Object对象

• 说明

  • %o、%O都是用来输出Object对象的
  • 对普通的Object对象，两者没区别，但是打印DOM节点时就不一样了

• %o 可展开的DOM

  • 格式成可展开的的DOM，像在开发者工具Element面板那样可展开

console.log('%o',document.body.firstElementChild); 

• %O 列出DOM的属性
  • 像JS对象那样访问DOM元素，可查看DOM元素的属性
  • 等同于console.dir(document.body.firstElementChild)

console.log('%O',document.body.firstElementChild);

CSS渲染

• 说明
  • 使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染
  • 常见的输出方式有两种：文字样式、图片输出
  • console 不支持 width 和 height，利用空格和 font-size 代替
  • 还可以使用 padding 和 line-height 代替宽高
  • 输出面板一样的字符画
    • 由于 console 不能定义 img，因此用背景图片代替
    • 网址：
      • http://www.network-science.de/ascii/
      • https://www.degraeve.com/img2txt.php
    • 说明
      • console输出默认是不换行的

console.log("%c蜀山记","color: red; font-size: 20px"); 

console.log("%c","background:url(https://static.runoob.com/images/runoob-logo.png) no-repeat;padding:50px 300px;line-height:120px");

信息分组

console.group("第一组信息");
  console.log("第一组第一条");
  console.log("第一组第二条");
console.groupEnd();
  
console.group("第二组信息");
  console.log("第二组第一条");
  console.log("第二组第二条");
console.groupEnd();

查看对象的信息

var info = {
  site:"http://www.baidu.com",
  name:"风和日丽"
};
console.dir(info);

显示某个节点的内容

• 说明
  • console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

<div id="info">
  <h3>风和日丽</h3>
  <p>学的不仅是技术，更是梦想！</p>
</div>
<script type="text/javascript">
  var info = document.getElementById('info');
  console.dirxml(info);
</script>

判断变量是否是真

• 说明
  • console.assert()用来判断一个表达式或变量是否为真
  • 如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常

var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );

追踪函数的调用轨迹

• 说明
  • console.trace()用来追踪函数的调用轨迹

/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
function add(a,b){
  console.trace();
  return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

计时功能

• 说明
  • console.time() 和 console.timeEnd()，用来显示代码的运行时间

console.time("控制台计时器一");
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");

console.profile() 的性能分析

• 说明
  • 性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是 console.profile()

function All() {
  alert(1);
  for (var i = 0; i < 10; i++) {
    funcA(1000);
  }　　　　
  funcB(10000);　　
}
function funcA(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}
function funcB(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}
console.profile('性能分析器');
All();　　
console.profileEnd();