NEWS

建站资讯

做好的网页设计如何在谷歌浏览器调试预览

新闻资讯编辑：【三行广州网站建设www.3gonet.com】 发布时间2013.10.27.浏览数：3019
谷歌浏览器调试网页设计的方法步骤 , 广州网站建设www.3gonet.com三行网络 为您详细介绍 - 请往下阅读》

谷歌浏览器调试网页设计的方法步骤

做好的网页设计如何在谷歌浏览器调试预览：

网页制作过程中，调试时必不可少的一步，火狐Firebug是众多开发者追捧的利器，但是习惯使用谷歌浏览器的朋友就无法使用火狐的插件，这样就苦恼了。所幸，在谷歌的不断升级下，它的浏览器自带开发者工具，可以实现代码修改并预览。看看如何使用吧。

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

如何使用谷歌浏览器进行网页设计的调试预览

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

如何使用谷歌浏览器进行网页设计的调试预览

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

如何使用谷歌浏览器进行网页设计的调试预览

如何使用谷歌浏览器进行网页设计的调试预览

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

如何使用谷歌浏览器进行网页设计的调试预览

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

如何使用谷歌浏览器进行网页设计的调试预览

本文由广州网站建设公司-三行网络原创，转载请保留版权（ 广州网站建设www.3gonet.com ）三行网络——专注于企业网站建设、响应式营销型网站定制，欢迎来电咨询！热线：020-85628720 【微信：15989229398】

标签： 谷歌浏览器调试网页设计的方法步骤

上一篇：怎么购买企业qq，办理企业qq的流程、费用?    下一篇：怎样用PS批量处理产品图片大小?

谷歌浏览器调试网页设计的方法步骤

微网站Webapp 三行网络专业订制开发微信网站制作,让微信公众账号实现微菜单、微活动、微会员、微商城等功能，打造炫丽的企业微网站！公众平台搭配"微网站"，犹如虎添翼！在保留公众平台所有优势的前提下，提升展示形象，更好的与客户互动。