Chrome浏览器“审查元素”功能,网页制作好帮手.doc_第1页
Chrome浏览器“审查元素”功能,网页制作好帮手.doc_第2页
Chrome浏览器“审查元素”功能,网页制作好帮手.doc_第3页
Chrome浏览器“审查元素”功能,网页制作好帮手.doc_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

文：721出处：第七基地（/forum.php?mod=viewthread&tid=2978）今天想在Discuz!的帖子列表里加一些自己的东西进去，但无奈，自己水平太菜，打开源代码根本分不清哪块代码对应哪块地方，不知道该把东西加在哪里，不过手上用的正好是Chrome浏览器，于是“审查元素”功能帮了大忙。在网页上除flash以外的其他大多数位置右击，即可调出审查元素的界面，会显示在浏览器底端。界面上有好几个标签页，下面介绍一下它的一些功能。第一个Elements面板，个人觉得是页面布局方面最实用的一项功能，可以直接以层叠的样式显示出网页的布局，它并不像“查看源代码”那样，显示出全部的代码，而是只显示这一类的标签，更直观的体现出了网页的布局，如果要知道详细内容，还能右击查看该段的源代码。选择元素右击，可以马上将光标定位到该段代码的位置，鼠标移到代码处，网页上还会加深显示改代码在网页上的位置，十分方便，比如我想在签名图位置上面加上自己的东西，就先找到签名段代码所在的位置。右侧会显示当前选中项的CSS样式，比较值得注意的是，光标移至其中的项时，可以通过将右边的勾去掉，来屏蔽掉该项样式，并且即时体现在网页上，大大方便了对网页布局的调试。更神奇的是，你还可以双击元素项，实时修改网页上各段的代码，也会及时体现在网页上，对于查bug相当的方便。最下面还有一块可以显示网页的嵌套关系，类似dreamweaver代码框下面那段，但是由于可以实时在网页上加深显示，个人觉得比dreamweaver更方便。Recources面板，主要显示网页中包含的一些文件，像是图片，嵌套进去的网页什么的。在查看这项时，我发现以前迅雷看看的广告没删干净，高保留着一些广告内容，会在每次加载页面时载入，囧.我个人觉得更实用的是，下面的几个标签，可以查看本地的缓存以及session cookie等信息，并且还可以手动删除cookie，相当好用。Network面板，可以查看文件的载入速度。TimeLine面板好像是用来显示和调试一些延时事件的，我目前访问的几个页面都没有显示，不太清楚。Scripts面板也是相当不错的调试工具，可以修改代码调试VBScriptsJavaScripts等脚本，嵌套进网页的也可以很方便的切换调试，右边的调试工具感觉相当的复杂，自己没完全看懂= =，貌似具有监控变量的变化等功能，个人JS水平有限，就不深入研究了。最后面还有个Console面板，可以反映出网页上的错误，比如哪张图片载不出来，哪些是无效链接等等，查错时有些用处。总体感觉Chrome浏览器的审查元素功能
人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论