如何利用谷歌浏览器自带工具进行网页调试

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

1、先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击,下拉菜单选工具——开发者工具,快捷键CTRL+shift+I (配图)
佛山网站建设

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

佛山网站建设

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

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

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

佛山网站建设

标签: 佛山网站建设网页设计网页制作网站制作企业网站建设做网站佛山网络营销佛山网站优化
上一篇:网站制作与页面设计应注意五大要点 下一篇:每天更新网站内容的目的——网站更新内容给谁看的

网页设计

联系建站公司
佛山市顺德区大良凤翔商业广场二座670
网站建设/网站优化:13715431176
建站公司业务邮箱:sale@fslingdu.com
专业业务范围: 找公司建网站 广州网站建设 免费建站 如何自己建一个网站 建网站多少钱 如何制作网站 免费一键搭建网站 网站建设方案 为您提供一站式网站规划服务
粤ICP备16067714号-3
Copyright © 佛山市区零度飞易信息科技有限公司