Web开发前端调试小技巧——Chrome控制台
Hello大家好，兔妞总觉得写代码很重要，调试也很重要，特别是前端，不光要看日志，还要调整样式，浏览器兔妞最喜欢用Chrome了，所以今天就为大家带来Chrome的调试技巧啦~~
首先为大家介绍一下打开控制台的方法：
首先打开需要查看的页面，如果是Mac，就两指点击，打开审查元素（inspect），如果是windows就右键打开审查元素。打开页面如图所示：
我们会看到Elements、Console、Network、Performance、Memory、Application、Security和Audits八个tab页。我们将详细讲一下每一个tab页的作用，小tab暗藏玄机呢~
>>>>
Elements
这可是调试HTML和CSS的利器呢！审查元素顾名思义就是查看元素，对每个元素进行查看。如下图是对Google的首页进行审查元素得到的效果。这个tab是左右结构，左侧就是页面的HTML结构，我们可以对其进行查看和编辑，当选中某个元素再去点击审查元素时，则会自动定位到元素；右侧则是当前元素的基本属性：分别是Styles、Computed、Event Listeners、DOM-Breakpoints和Properties。我们可以通过Styles查看选中元素的样式，并通过修改调试样式；在computed中我们可以看到选中元素的可视化模拟盒子，长款多少、padding、margin都绘制出来了；Event Listeners中我们可以看到元素被设置了什么事件；Properties绝对是个后门一样的存在，它为开发者统计了元素所具有的方法和属性。
>>>>
Console
如果说前面的Elements是主要针对于HTML与CSS，console就是JavaScript的天堂，通过console不需要断点我们就可以解决很多问题，因为Console记录了开发者在开发过程中的日志信息，也可以用来运行js脚本。
（1）我们通过代码可以执行console家族如下所示：
console.log(): 用来显示日志信息；
console.warn():显示黄色的警告信息；
console.error():显示红色的错误信息；
console.assert();当第一个参数为false时，显示第一个参数的值；
console.log(‘rabbit’);
console.warn(‘So cute’);
console.error(‘you have found the wrongrabbit!’);
console.assert(i>1, ‘i is equal to 0’);
（2）不仅可以调试信息，还可以用来计算JavaScript表达式。
>>>>
Source
主要用来设置断点，调试JS代码。
（1） DOM改变：在elements面板中可以点击指定的DOM节点上右击，在弹出的菜单中选择breakon，当选择的节点里面的子节点被增删改查时，断点会被触发。
（2） XHR声明期变化：当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHRBreakpoints栏设置的字符串匹配时，则断点就会有触发。
（3）指定事件执行：在Sources面板右侧的XHRBreakpoints栏下面是EventListener Breakpoints,列出了各种类型的事件，勾选你要监听的事件，在指定的事件执行时，断点就会有触发。
>>>>
Network
这个tab可以记录页面上的网络请求的详情信息，包括状态、资源类型、大小、所用时间、Request和Response等。
Name：是接口的名称
Status：代表请求状态
Type：请求的资源MIME类型
Initiator：标记请求发出对象
Size：从服务器下载文件的大小
Time：请求、下载时间
看到那个像个摄像机的小标识了吗？那就是屏幕捕获，点击摄像机，重新加载页面即可捕获屏幕。双击放大捕获，并可查看上一帧下一帧。
>>>>
Performance
可以通过这个面板查看网页性能的问题。
主要包括：
（1）Controls 录制开关和控制录制过程中需要记录哪些信息。
（2）Overview 网页性能的概要信息。
（3）FlameChart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
（4）Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。
>>>>
Memory
（1） Take Heap Snapshot: 通过创建堆快照查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题；
（2）Summary视图：显示所有对象信息，可选择一个对象展开查看详细信息。
>>>>
Application
这个tab主要负责记录网站加载的资源（存储数据、缓存数据、字体、图片、脚本、样式表等）。
>>>>
Security
这个tab用来调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
>>>>
Audits
对当前网页对网络的利用情况和网页性能进行诊断，并给出优化建议。
>>>>
自适应调节
最后要说一下左上角那个小手机标志的icon，其实那是一个自适应布局调整神器哟！点击了这个icon后我们就可以把浏览器模拟为不同终端的效果，从而调整css样式！
好啦，今天的内容就到这里啦，兔妞为大家整理的Chrome调试技巧，不知道有没有帮助呢，如果还有什么更好的用途，欢迎后台留言哦~如果喜欢文章请关注+好看哦，越点越好看~~