chrome开发者工具-熟悉你的工具

chrome开发者工具-熟悉你的工具

月光魔力鸭

阅读 95 喜欢 0 chrome 开发者工具

其实,不论是前端开发者,还是后端开发者,熟练的使用自己手头的工具是必不可少的,下面对chrome开发者工具进行详细介绍下,已经熟练使用的就跳过,总有你想要的。

以下仅以chrome浏览器进行介绍,其他浏览器不在此列。 多图警告

开启开发者工具

虽然超级简单,但还是要说上一说。

开启后大约是这样的

Elements

elements 中展示该页面的所有渲染完毕的DOM元素,在这里我们可以查看每个元素的属性、样式和内容,同时,也可以直接进行修改。

选择元素

可以通过点击该按钮,然后在页面中选择某个元素直接查看。点击后可以在右侧查看这个元素所关联的样式。调试的时候可以直接选择或取消某个样式属性,随时查看效果。

在右侧面板中,可以直接添加想要的样式属性进行调试,不必再回到编辑器中修改,等在这里修改后,可以直接复制进去到样式表中。 同时也可以看到属性所属文件,并直接打开样式表文件。

如果想要查看鼠标移入或点击或聚焦后的效果,可以点击这里:hov 查看。如果想要增加某个class ,也可以直接点击.cls 增加相关的class属性查看。

在DOM中右键,还可以看到一系列的功能,比如:增加属性、删除、复制、编辑等。

除了能够查看dom的样式外,我们还可以查看dom相关的盒模型以及所在dom上的事件、属性等,不算很常用,但是也可以稍微了解下。

那么,在elements中大体常用的功能点如下:

Memory

内存这部分其实还是很强大的,奈何水平有限,自己平时也没怎么使用这部分做过优化,所以这里直接给大家扔一个文章,可以去这里看下,介绍的超级详细。

http://web.jobbole.com/81915/

Console

关于控制台,我想大家应该算是很常用的了,包括查看js的错误信息,查看打印信息以及直接进行调试都可以在这里执行。

比如,可以直接在控制台查看报错信息,然后根据报错信息进行相关的修正。

也可以直接在控制台进行调试页面内的对象。例如使用页面中相关对象包括函数,当然如果页面是多frame的结构,那么还要注意当前控制台所属页面范围。看到左上角的top没,可以在这里点击选择某个frame页面。

至于在页面中如何进行调试,甚至在控制台打印出各种花来,那么就得仔细看关于console对象的使用了。 https://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Source

源码中,我们一般会用来对js进行断点调试,当发现页面中某些功能或数据跟我们的期望不同或有错误的时候,就可以跟java一样,在浏览器的source中进行一步一步的跟进查看数据变化。

Audits

Network

Performance

Application

Security

转载请注明出处: https://chrunlee.cn/article/chrome-debug-tool.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
chrome 如何查看placeholder样式以及其他伪类样式
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
一直有跑着puppeteer在做pdf的生成,可以今天突然发现一个问题:预览与打印生成的PDF不一致,猜测可能是边距导致的,应该是没设置好... 然后当我在本地尝试的时候也发现了这个问题..要么是字符,要么是版本
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。
需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
最开始其实只是网站的一个小改版,导致的需要发送邮件的功能,本身功能不复杂,不做工具的话,几行代码应该就可以搞定的.. 不过后来想想,这个功能应该还是有一定的小需求的,就做成了工具。
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。
接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。