返回上一页 网站制作与页面设计应注意五大要点 网站建设公司资讯 每天更新网站内容的目的——网站更新内容给谁看的

当前位置:首页 > 观点资讯 > 网站建设 > 详细内容

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

时间:23-03-25 浏览:200次 + 打印

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

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

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

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

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


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

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

网站建设公司项目经理

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音
解答:网站优化、网站建设、APP开发、小程序开发

如有侵权需要删除文章请联系我

小宇宙是一家以提供网站建设网站优化APP开发小程序开发、网络营销推广为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求长远发展的企业贡献全部力量。

Learn more

关于我们 专业网站设计制作

Learn more

服务项目 南京网站建设
获取网站设计、app开发、VI设计报价 微信客服 返回顶部
网站制作
扫二维码与项目经理沟通
×

Let\'s get in touch!,login get more service.

我们将艺术与技术相结合,用创意和设计为客户创造商业价值,创造优秀的产品及服务体验!登陆之后可以获得更多的私人定制服务

sitemap.txt sitemap.xml sitemap.htm 网站设计制作