debugger前端调试

一、Element（元素）：快速调试样式 刷新会丢失
实用技巧：调试样式 ，上下方向键可以快速微调；
存储为全局变量，快速获取dom元素
右击存储为全局变量，

控制台中显示temp1，输入temp1.value显示输入值

flex（弹性布局）：先开启flex， display:flex
flex: 1 表示子项目将会占用容器中所有可用的剩余空间，以实现均匀分布
flex-direction: row; // (默认值) 主轴水平方向，从左往右 如图：
flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
flex-direction: column; // 主轴为垂直方向，从上往下
flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上

二、Console（控制台）：输出浏览器运行过程中产生的信息
实用技巧：可以当作计算器，可以运行代码
js代码中写打印：
console.log(); //普通打印
console.warn(); //打印警告信息
console.error(); //打印错误信息
console.dir(); //打印函数、对象等

三、Source（源代码）：
断点：代码会在断点处停住，给开发者观察的机会!

上面几个控制执行的按钮分别是：

1.继续执行脚本
2.跳过下一个函数调用 F10 Ctrl+’
3.进入下一个函数调用 F11 Ctrl+;
4.跳出当前函数Shift+F11 Ctrl+Shift+;
5.单步调试F9
6.停用断点

四、Network（网络）
见博主上一篇 F12Network中各个标题的含义

五、调试的基本流程
核心原则：精确定位bug位置，分析原因，解决问题

5.1整体流程
1.有报错：查看控制台，定位是否为语法问题，类库兼容问题
2.通信不成功：查看网络，定位前端问题，或是后端问题
3.无报错，或把偶从且无效信息：二分注释排查法

5.2控制台报错
1.JS常见错误
2.类库兼容问题

5.2.1常见JS错误

注：报错文件从上往下看

（1） Uncaught SyntaxError（语法错误）

（2）Uncaught ReferenceError（引用错误，一般是引用的变量等未声明）

（3）Uncaught TypeError(类型错误，一般是在错误的数据类型上，访问某个方法或属性

（4）Uncaught RangeError（死循环）