chrome切换前端模式_前端谷歌chrome浏览器调试总结

写在前面：

在简书看了一篇很全面的博客https://www.jianshu.com/p/b25c5b88baf5，内容文字几乎都是原作的，图片是我自己加的，也顺带回顾下暑期实习。

上个学期四五月份开始零基础学习前端，当时对于谷歌浏览器的控制台没什么概念，有幸暑假在公司实习两个月，分享一下我使用谷歌浏览器的调试心得。

调试工具：

一、箭头按钮和设备图标

箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，箭头按钮会变成选择状态。

点击后可以在页面上选中自己想要的元素，如下图：

设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。如下图可见：

二、Elements

用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。

下图我们可以看到当我鼠标选择id为main的div元素时，右侧的css样式对应的会展示出此id的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效。因为每在编辑器中修改一次代码就刷新页面实在是太低效了，而且很不方便。