如何利用谷歌浏览器自带工具进行网页调试-京杭网网站建设公司

资料来源：网络整理时间：2023/3/23 0:46:13 共计：3573 浏览

网站的兼容性问题是所有前端人员的一个苦恼，每次页面调试会用多种的浏览器进行调试，比如谷歌、火狐、ie6--ie9、google、360等等，很多的网页制作人员都会经常在我们常用的浏览器中进行多次的调试，今天我们就来带大家说一下在谷歌浏览器，在谷歌不断升级下，它的浏览器自带开发者工具，可以实现代码修改并预览。

1、先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击，下拉菜单选工具——开发者工具，快捷键CTRL+shift+I （配图）

2、打开开发者工具后，在浏览器下方出现一个调试面板。左侧是网页HTML调试查看，右侧是CSS代码调试，还有一些JS，资源的折叠起来了。

3、谷歌浏览器调试的好处就是，可以实现元素定位，把鼠标放在指定的元素上，就可以在浏览器的上面视图中加灰突出显示所对应的元素。

4、右侧的CSS代码调试是一个不错的工具，不仅可以查看对应的标签的代码，同时还可以实时更改代码的值并在浏览器上方视图中显现变化。

5、CSS调试中，还有盒子模型的形象视图。在右侧折叠面板中可以打开，实现对margin,padding等的定位计算。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：网站建设前如何给你的网站定位-京杭网网站建设公司 | ·下一条：网站制作与页面设计应注意五大要点-京杭网网站建设公司