chrome调试

在浏览器按下F12键或者在设置找到开发者工具，就会弹出调试功能

Element

可以调试电脑和手机的元素样式, 比如调试元素大小，盒子模型，定位，背景等css样式调试
查看html节点树以及其样式

Console

输出js语句的console的内容，console日志方便我们解决bug
console.log 在控制台输出，不会转换数据类型，可以输出任何数据类型
console.error 输出错误
console.table 把json数据看成一个表格
console.dir 输出比log更加详细一些

Source

1  代码片段Snippets
      可以在snippets新建一个调试文件,  该文件会保存到浏览器。 
      比在console调试方便, 在snippets片段练习js代码很方便
2 断点调试
    2.1 ctrl+o 查找要调试的文件，进入文件
        在文件左侧的数字可以打断点
        在网页操作，让程序运行到断点的位置
   2.2
      
       蓝色三角形指向右边的按钮：作用是跳到下一个断点
       第二个按钮：从断点当前函数开始，每点击一次，高亮行会去到上一个函数的位置
   2.3 
       call stack:  函数调用的堆栈, 函数上一个函数是谁，然后在上一个函数是谁
       scope:  可以清楚看到当前位置的所有作用域和变量
       watch:   可以监控执行当前断点作用域的任何表达式的执行结果
       
         

Network

1 可以查看当前网页所有的请求文件的大小、速度、

Application

        1 可以查看sessionStorage,  localStorage, cookie等的键值对
        2 可以查看frame