使用Google Chrome调试代码是一个开发场景中前端人员的必备技能。今天分享一个教程，教你如何通过Google Chrome实时查看源代码，修改代码，预览网页效果！当调整完成后，我们可以更快的发现问题，更高效的发现bug，所以赶紧学吧！
首先，调用开发工具。
按键盘F12，或在空白区域按空鼠标右键选择check。另一种方式是快捷键Ctrl+Shift+I。
二。开发者工具中的通用内容介绍
1.元素:主要用于调试HTML和CSS代码。
2.检查元素的代码:
点击左上角的箭头图标进入选择元素的模式，然后从页面中选择要查看的元素，然后在开发者工具元素一栏中定位该元素源代码的具体位置。
3.检查元素的属性:
找到元素的源代码后，可以从源代码中读取修改后的元素的属性。下图中class、src、width等属性的值。
当然，你从源代码中读到的只是显式声明的属性的一部分。要查看该元素的所有属性，您可以在右侧的边栏中查看它们:
4.修改元素的代码和属性:
点击元素，然后勾选右键菜单，可以看到chrome为元素提供的操作:编辑元素代码，修改属性等。当选择“编辑为HTML”选项时，元素进入编辑模式，可以任意修改元素的代码。当然这个修改只对当前页面渲染生效，不会修改服务器的源代码，所以这个功能也是作为调试页面效果使用的。
5.检查元素的CSS属性:
元素的CSS属性可以在元素右栏的样式页面上查看。此页面显示最初由元素定义的CSS属性以及从父元素继承的CSS属性。从这个页面还可以发现，这个元素的一个CSS特性来自于那个CSS文件，这使得调试时修改代码非常方便。
在Styles页面的旁边，有一个计算后的页面，显示了计算后元素的所有CSS属性，也就是浏览器最后渲染页面时使用的属性。属性的计算由浏览器自动执行，这是浏览器呈现页面的基本过程。
6.修改元素的CSS属性:
在元素的样式页面上，您可以修改元素的CSS属性，甚至可以删除原有的属性并添加新的属性。但是，这些更改只在当前浏览器的页面显示上生效，不会修改CSS源代码。所以这里CSS属性的修改一般是用来调整和改善元素的渲染效果。
向元素添加断点:在元素的右键菜单中选择断点选项。选中后，修改元素时，页面加载会暂停，然后可以查看元素的属性。
添加元素断点后，可以在右边栏的DOM断点页面中看到它们。该页面可以看到当前网页的所有元素断点。
7.检查元素的监听事件:
元素，可以查看该元素的所有事件侦听器事件。在开发中，尤其是维护别人的代码时，会出现不知道对应元素的监听事件。这时，你可以在这个页面上找到它们。这个页面不仅可以看到对应的事件函数，还可以定位到函数所在的JS文件及其在文件中的具体位置，大大提高了开发和维护的效率。
三。安慰
查看代码错误信息，打印代码，调试代码，查看js中的API。
2.执行JS语句:
3.检查控制台日志:
在网页的JS代码中使用console.log函数时，该函数输出的日志信息会显示在控制台中。日志信息一般是在开发调试的时候启用的，但是正式上线的时候，这个功能一般就被去掉了。
四。来源
检查资源和其他文件，调试代码。
1、检查文件:您可以在源代码页面查看当前网页的所有源文件。在左栏中，您可以看到源文件以树形结构显示。
2.添加断点:
源代码的左边有一个行号。单击相应行的行号，向行更改添加断点。右键单击断点，在弹出菜单中选择“编辑断点”,向断点添加中断条件。
3.中断调试:
添加断点后，JS代码运行到断点时会被中断。此时，您可以将光标放在变量上以查看其
也可以在右侧边栏上查看:
在右侧变量的顶部，有继续运行、单步跳过等按钮。您可以在当前断点之后逐行运行代码，或者让它继续运行。
动词 （verb的缩写）网络:
检查网页的HTTP通讯，资源是否加载成功等。
总结:本教程告诉你，1.如何调出开发者工具调试代码；
2.开发者工具中常用内容介绍；
3.控制台，查看代码错误信息，打印代码，调试代码，查看API在js；
来源。检查资源和其他文件，调试代码；
5.网络:检查网页的HTTP通信，资源是否加载成功等。
你是怎么学会的？如果对你有帮助，记得给我一个赞，支持一下！
