2.4 chrome 开发者工具

开发者工具顶部有Elements、Console、Network等八个栏目。常用的有三个：Elements，用来查看需爬取字段的HTML标签信息；Console，可以检测你的JS代码；Network，用来分析HTTP请求。

Sources调试使用

在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好

Resources

可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies

NetWork

可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源

tips:

谷歌浏览器建议使用Ctrl+R刷新页面，可以将修改的js和html代码无误快速更新

时间： 2024-11-10 07:31:41

2.4 chrome 开发者工具的相关文章

利用 Chrome 开发者工具远程调试 Android 中的原生 WebView

之前写过一篇关于 Android Studio 断点调试技巧 的文章,但都是针对 Native 代码的调试,对于 Hybrid 开发模式下的 WebView 却无从下手.幸运的是,PC 中的 Chrome 浏览器提供的开发者工具能够帮助我们远程调试 Android 中的 WebView 加载的网页. Android 4.4 (KitKat) 开始,使用 Chrome 开发者工具可以帮助我们在原生 Android 应用中远程调试 WebView 网页内容.一起来看看怎么操作吧. 第一步,设置 We

Chrome开发者工具详解(1)：Elements、Console、Sources面板

Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

神器——Chrome开发者工具(一)

http://segmentfault.com/a/1190000000683599 原文地址 这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下的firebug.本文将会详细讲述如何使用Chrome开发者工具,希望里面有些让你感到惊艳的东西!即使你不用Chrome,那么文中的某些内容也会相当有用. 首先啰嗦一下如何打开开发者工具吧.可以直接在页面

Google Chrome开发者工具

Google Chrome开发者工具 是内嵌到浏览器的开发工具,打开方式有两种:第一“按F12”,第二:shift+ctrl+i(火狐.360等浏览器也可以这么用) Console介绍 Console可以查看网页运行后提示的消息,错误或者警告以及输出内容等,网页后台可以使用Console.debug("输出内容"):来在Console输出显示,可以做到调试的作用吧,不过一般真正调试不是拿Console.console.debug("Console使用介绍");con

http://segmentfault.com/a/1190000000683599神器——Chrome开发者工具(一)

这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下的firebug.本文将会详细讲述如何使用Chrome开发者工具,希望里面有些让你感到惊艳的东西!即使你不用Chrome,那么文中的某些内容也会相当有用. 首先啰嗦一下如何打开开发者工具吧.可以直接在页面上点击右键,然后选择审查元素:或者是打开Tools--Developer Tools:或者是用快

Chrome开发者工具指南：（三、性能篇）

卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油).它们的作用大多数情况下是帮助你进行功能开发的.然而在你开发应用级别的网站项目的时候,随着代码的增加,功能的增加,性能会逐渐成为你需要关注的部分.那么网站的性能问题具体是指什么呢?在卤煮看来,一个网站的性能主要关乎两项,一是加载性能.二是

Chrome开发者工具不完全指南（五、移动篇）

前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板. 一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能.首先开下它的主界面. Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议.为了验证这一点,我们可以做一次简单的测试.根据十四条web性能建议中的其中一条:把css文件应该放入html文档的顶部,避免网页在渲染dom后出现闪烁的问题.我们写如下不规范

Chrome开发者工具不完全指南（六、插件篇）

本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以盼的皮肤插件.这款插件叫DevTools Theme: Zero Dark Matrix.在商店中下载之,然后打开这个地址:chrome://flags,找到Enable Developer Tools experments (可以查找experments关键字迅速锁定之)勾选启用复选框.重启浏览器

前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 1,打开Shadow DOM显示 浏览器对例如Video.Password等组件进行了封装,无法查看到组件的详细代码,不利于调试.幸好,通过配置能够在元素标签器中显示被隐藏的组件代码. 实现:Settings → General → Elements → Show user agent shadow DOM 2,在控制台快速选择元素 在Chrome Dev Tools 控制