chrome的开发者工具怎么用?


就是在chrome下按F12就弹出来的那个

推荐  (0) | 16人关注关注
6个答案
28 0

精英王子高中退学,独立开发者,独立博客作者,深度 Git...

2012-12-01 17:45

Elements(元素/标签):
查看页面中所有的HTML元素,左面是用树形结构展示的HTML标签,鼠标移到上面会在页面中显示这个标签的位置、实际长宽等。右面是每个元素的CSS属性,继承关系等等,还有DOM属性、继承关系、绑定的事件。

Resource(资源):
显示页面中用到的所有资源,页面、图片、样式表、脚本等。还有本地储存、Cookie.

Network(网络):
显示所有的网络事件,你需要先打开开发人员工具,切换到这个选项卡,之后再刷新页面才会有显示。
这里会显示每个文件的信息、由何处触发这个网络活动、HTTP报头等等.

Sources(源代码):
用于对js进行调试,左面有所有js代码的列表,中间是代码区域(下面有个格式化代码的功能),右边是断点、触发器、调用栈等等.

Timeline(时间轴):
同样需要先打开这个选项卡,点击下面的`开始捕捉`才会有显示。
这个选项卡会显示页面中的一切时间,包括运行脚本、网络活动、页面渲染等等。
而且会很详细的显示每个活动占用的CPU和内存.
可以利用这些信息对网页进行优化.

Profiles(报告):
可以截取一段时间的CPU使用情况报告、CSS类使用情况报告(用来剔除未用到的CSS)、堆内存快照(用于优化js脚本和DOM结构).

Audits(审计):
让Chrome给你的网页提出一点建议,一般是关于哪些代码不必要、没用到.

Console(控制台):
这是一个js控制台,你可以直接运行js代码,对页面进行操作.

-----------

下面边栏,点一下`放大镜`按钮,然后你可以在页面中点击一个区域,然后就会跳到Elements中对应的元素了。
在页面中某一区域,点右键,选`审查元素`是一样的效果

如果页面js有错,边栏右面会提示,点击提示会显示错误的位置和信息。

ps:你安装的扩展里面的脚本也都是计入以上功能中的.

下面边栏最右面有个`设置`按钮,点击会弹出一个对话框。
General里面有一些个性化的设置,如开发人员工具显示在哪,如何显示RGB值等等,还有个禁用js的功能.
Overrides里面有个很有趣的功能就是修改UA和分辨率.
Shortcuts列出了开发人员工具中的快捷键

以上针对Chrome 23.0.1271.95 m

开发人员工具的官方文档(英文):https://developers.google.com/chrome-developer-tools/docs/overview
我上面的是自己写的,不是对这个文档的翻译

1 0

架構夢想程序猿 代码格式化洁癖 理想主义洁癖 等

2013-03-30 08:59
支持者: 杰作哈9

我最常用的基本就2个功能

一个是看元素标签.不过很少打开直接看.
都是在页面上想看的元素上右键审查元素.
他会自动地位到html标签上 非常方便.

而且支持直接修改标签/css样式

还有就是js 调试器

哦,对了.左下角最左边是让工具箱弹出来的按钮

第二个是个控制台 调试js的时候可以查看对象内容.而且带自动补全.可以查参数/函数名用.

js调试器也支持本地js直接修改功能.

其他的功能用的不多,加载速度.回传Head什么的.....

1 0

Dawskiper计算机系&数字娱乐设计在读本科生

2013-03-30 14:22
支持者: 双刀剁馅儿

补充一下.用其中的Network可以直接下载部分视频网址的视频.
在观看网络视频的时候,打开Network,再刷新网页,一般都能抓到视频的源文件(.flv)后缀.
可以让Network的文件按类型或者大小排列,就能显示出来这个文件,然后右键拷贝网址就能下载了.

0 0

恍惊起而长嗟计算机学士 经济学硕士 卢瑟

2013-03-30 12:30

给开发者用的

0 0

220volt医学检验从业人员

2014-09-27 15:43

修改完成后怎样保存呢?

查看更多

添加回答

登录 后回答问题,你也可以用以下帐号直接登录

相关问答

关于我们 加入果壳 媒体报道 帮助中心 果壳活动 家长监控 免责声明 联系我们 移动版 移动应用

©果壳网    京ICP证100430号    京网文[2018] 6282-492号    新出发京零字东150005号     京公网安备11010502007133号

违法和不良信息举报邮箱:jubao@guokr.com    举报电话:18612934101    网上有害信息举报专区    儿童色情信息举报专区