审查元素的使用(IE,Chromium 网页调试)
2012-07-30 12:03
127 查看
| http://www.chromechina.com/thread-5166-1-1.html 审查元素功能窗口(Developer Tools)里又分为六个子功能，分别为Elements、Resources、Scripts、TimeLine、Profiles、Storage Elements面板里包含最基本的功能，也是最实用的功能。 Elements面板的左侧是网页整体的层次图，只要你的网页具有良好的机构，从这个层次里便可对网页全局把握。相反，如果得网页结构不好，也可以从这里看出。被选中的部分是你调用审查功能时，鼠标停靠处的网页元素，也就是你要审查的元；Elements面板的右侧是元素的几个基本属性面板，包括元素的Styles、Metrics、Properties、Event Listeners。 Recources面板里包含的是网页的所有文件，包括Document、CSS、脚本、图片等等。你可以在这个面板里查看，各个文件的加载时间，以及他们的大小等等，功能不算很多，但是统计做的不错，给人很直观的感觉。 Scripts面板是脚本调试的面板，首先它包含网页所以的脚本，其次是它可以在这个面板里调试脚本，调试器具备基本功能，设置断点，调用堆栈，变量监控等功能，详细的使用，我自己也还在摸索之中，等研究透了，再与大家分享。 TimeLine时间表面板，其实也是个监控面板，监控页面各个文件的载入以及各个事件的响应时间，这个功能个人觉得实用性不是很强，等以后发现它的价值的时候，再做研究。 Profiles面板是监控或者说是统计网页占用的内存以及CPU的情况，这个面板的实用性也不是很强，不过可以在网页占用资源很大的时候分析一下到底是什么元素占用太多的资源。 Storage面板统计的是网页在本地存储的一些cookies等，人性化的设计，让它可以在这里删除这些cookies，要是不能删除的话，我想这个面板也确实没什么用处了。 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE调试网页之六：使用 F12 开发人员工具调试 HTML 和 CSS (Windows)
- IE: 如何使用 F12 开发人员工具调试网页
- IE调试网页之三：使用 F12 工具控制台查看错误和状态 (Windows)
- IE调试网页之三：使用 F12 工具控制台查看错误和状态 (Windows)
- IE调试网页之七：使用探查器工具分析代码性能 (Windows)
- IE调试网页之五：使用 F12 开发人员工具调试 JavaScript 错误 (Windows)
- （zz）针对不同网页使用不同代理 —— IE自动配置脚本
- 如何使用 F12 开发人员工具调试网页
- HTML5 使用结构元素进行网页布局
- IE6共存、调试（查看Dom元素，修改元素样式）之我见 + IE6下Firebug Lite的使用
- 使用postman发送http请求调试网页
- MIUI开启开发者模式以及使用chrome调试移动设备上打开的网页
- ie6、ie7dom 元素重新渲染及zoom的使用
- IE 8 浏览器 F12 调试功能无法使用
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试：ie下的 pointer-events- none
- firefox调试：：此地址使用了一个通常应该用于其他网页浏览的端口。由于安全原因，Firefox 取消了该请求。
- IE8″开发人员工具”使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
- activeX，在VC 里面的调试正常，嵌入网页IE中显示为红色叉的原因。
- 使用debug.js调试手机网页
- TWebBrowser控件使用指定IE版本显示网页