Web前端调试工具——Webkit inspector..docx

作为研发人员，或多或少都要跟web前端打交道，这里分享下名为Webkit inspector的前端调试工具的使用技巧。 Webkit inspector大家应该不会陌生，它就是webkit内核集成的调试工具，如果安装了chrome、safari就可以直接使用( 这也是我选择介绍?Webkit inspector 而不介绍 firebug 的原因)。快捷键：ctrl + alt + i 或 F12 可以打开工具。这里会介绍Elements、Resources、Network、Console面板的常用的功能。Elements面板：通过元使用Elements面板可以查看原始 HTML、CSS和DOM，并进行实时操作。A.查找HTML元素有两种方式：1.在页面元素上反键调出菜单，选择“审查元素”，该方法可以帮你快速定位元素在HTML代码中的位置。2.点击底部菜单中的“放大镜”图标，然后再在页面中选择元素，该方法更直观的获取元素信息，比如元素的标签，类名，尺寸，是否有内外边距等。B.修改HTML选择一个节点，反键菜单，选择Edit as HTML即可添加或删除DOM节点C.查找、修改CSS找到元素后就可以在右侧列表里看到该元素的全部CSS信息，划线的CSS表示被覆盖的样式，通过样式后的选框来启用或取消该样式，或者直接在“element.style{}”中书写新的样式。Resources面板：可以查看到网页已载入的所有资源，包括HTML、JavaScript、CSS、图片、字体等，如果使用了HTML5的数据库、本地存储或离线应用，也可以在这个面板里找到相应的数据。对于后端研发同学，经常用到的应该是Cookies。这里可以查看所有的Cookie信息并删除它们。Network面板：这里可以了解网页发送了那些请求、请求花费了多长时间以及需要多少带宽，还可以查看每个资源的 HTTP 请求和响应标题。如果需要调试Ajax，这里会很方便。查看HTTP请求：Ajax发送的信息：以及服务器返回的信息：Console面板：控制台面板可以帮助我们查看有哪些JavaScript错误及即时调试JavaScript，方便我们用编程方式与网页进行交互。在这里可以输入任意JS代码，有语法提示，并且即时实现：如改变节点的CSS：控制台中内置了console对象，在Console面板里输入“console”(回车)可以看到console的属性和方法。我们可以在JS代码里调用它，最常用的是log()方法：script?console.log(test); ? ? //打印调试信息/script通常在调试JS时会用到alert()方法来打印信息，简单方便，但它也有局限性，比如当打印一个对象时，alert()方法只会打印对象类型，如：alert(document.getElementById(startup))而使用log()方法可以打印出对象详细信息：以上介绍的方法能帮助我们完成常规的网页调试工作，想了解更多的信息，可以浏览google官方文档：/intl/zh-CN/chrome/devtools/docs/overview.html。如果大家感兴趣我会接着介绍剩下功能面板的使用技巧。