Chrome调试面板及调试技能

前端如果不需要兼容IE浏览器，那么基本就一直使用Chrome浏览器了，它是基于WebKit内核的，安全高效。Chrome调试面板浏览器位于右上角，如下图所示

或者使用 Ctrl+Shift+I 快捷键 都可以打开。

 

1、认识面板

1是元素，是构建这个网页的DOM树以及CSS样式渲染。在这里可以查看每个元素的占比和样式，可以修改显示。一般情况下关于样式的问题，我都会打开，在这里审查元素，一个一个的看，修改像素值，添加样式，得到预期效果，再往代码中写。讲真，CSS真的是难。

2是调试窗口，有js报错，警告，也可以在代码中console.log()来输出内容进行调试，这是开发中最常使用的技能了，对于值的获取和解析很有帮助，同时，它还可以直接输入代码执行。这里将error，warning，info分开在tab窗口显示，个人觉得更好观察一些。

3是资源，这里是对网页解析后的每个文件， 如果是不同域名或是不同站点，它都会分析出来。现在都多用框架构建网页，都是打包后在服务器上跑着的，就会出现这样，看不懂的js文件。不用担心，这些都是打包后的文件，还会有图片资源等。在这里可以断点debugger调试，就在这里的代码前点击一下就加好了断点，在执行的时候就会断点调试，你自己可以按下一步的按钮让其执行。

4是请求资源，关于此网页的所有资源都会请求，包括图片，样式，接口数据等。点击查看具体的某个请求，header表示请求头，即发送数据方，有很多字段，这些都是在学习HTTP中要了解的，也是前端开发必备的重要技能，学习HTTP协议非常的重要，详见https://blog.csdn.net/zr15829039341/article/details/64125868

preview是返回值，请求成功会返回前后端约定好的数据，拿到数据进行解析就可以展示到页面上。这里也是判断bug属于前端还是后端的一个重要的点，如果200ok，数据都正确，那就是前端没有展示好，或者400错误，都是前端的锅（不完全是，看情况）；反之如果是500错误，那就是后端的错误了。

 

5是存储对象，展示一些网页端存储的数据，比如Cookies、LocalStorage、SessionStorage、Mainfest、Cache等，常用的就是Cookies,它用来记住网站的用户名和密码，可以设置过期时间，但是它不太安全，现在都是后端设置cookie和session来进行用户的区别和登录状态判断。

2、调试技巧

关于调试技巧，我觉得这篇博客不错，https://blog.csdn.net/shenlei19911210/article/details/50992137?utm_source=blogxgwz4。可以更好的改进工作流程，很赞。

PS：微信公众号

                                                                                      

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~