专栏首页ShanSan的云原生之路Chrome DevTools开发者工具

Chrome DevTools开发者工具

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools,可以在平时中的开发调试中极大的提高效率。

使用快捷键ctrl+shift+i或者f12可以直接打开开发者工具。

在DevTools开发者工具一共有九个部分。

Element

在这张图中,右边的开发者工具分为两部分,左边为HTML代码,右边是CSS代码以及样式。

1、最基本的使用就是快速定位到DOM节点在网页中的位置,或者DOM节点在在HTML代码中的位置。

在开发者工具模式下,鼠标移动到HTML代码上,网页上对应的DOM节点会亮起来,还会显示一些简单的信息。

反过来,通过DOM元素定位HTML代码位置,只需要先点击下图这个按钮,然后鼠标移动到DOM元素上的时候,HTML代码会直接移动到DOM元素对应点代码位置。

2、在HTML代码区域和CSS样式区域,可以直接双击鼠标编辑代码,样式会直接在页面上显示。

3、直接向元素添加不同状态下的样式。

4、在Event Listeners中查看元素绑定的事件。

5、在HTML代码中,右键元素,可以对改元素进行操作。

6、ctrl+f搜索,可以在网页上搜索内容,也可以在HTML中搜索。

Console

在控制台能显示浏览器的消息。(百度首页的控制台信息下有直接递交简历的地址)

可以在控制台执行代码段。

Sources

这里是源代码面板。

1、可以在每一行代码中设置断点调试代码。

2、这里可以查看网页的源代码文件,在下边有一个{}图标,点击以后可以格式化代码。

Network

Network也是很重要的一部分,功能也有很多。

1、“Disable cache”选项控制是否缓存,防止更改样式而看不到效果。

2、“Request Table”中可以显示可下载资源。(网页中的可下载视频找不到下载按钮,可以在这里下载)

3、filter可以过滤不同类型的资源,支持正则表达式过滤。

4、在“Name”点击一个request请求,会显示出request、response、cookie等信息。

Performance

Memory

Application

查看缓存数据库等。

Security

Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供,则主源会被标记为不安全。 如果请求的页面通过 HTTPS 检索,但页面会继续使用 HTTP 检索其他源的内容,然后页面仍然会被标记为不安全。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • V8带来的JS性能优化

    二、解释型语言:支持动态类型,弱类型,在程序运行的时候才进行编译,而编译前需要确定变量的类型,效率比较低,对不同系统平台有较大的兼容性。

    Cloud-Cloudys
  • 毕业设计(二):创建第一个爬虫

    使用scrapy startproject Spider创建一个名为Spider的项目。

    Cloud-Cloudys
  • Jupyter Notebooks的简单了解

    Jupyter Notebooks 是一款开源的网络应用,我们可以将其用于创建和共享代码与文档。其提供了一个环境,你无需离开这个环境,就可以在其中编写你的代码、...

    Cloud-Cloudys
  • 如何编写简练清晰的HTML代码?

    如何提升 Web 页面的性能,很多开发人员从多个方面来下手如 JavaScript、图像优化、服务器配置,文件压缩或是调整 CSS。 很显然 HTML 已经达到...

    用户1667431
  • 你不可不知的HTML优化技巧

    如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

    葡萄城控件
  • 猪哥爬虫专栏

    为什么要写系列文章?因为个人感觉这里写一点那里写一篇,知识点零散,对读者来说很难真的学到东西!为了能让大家真的入门Python语言,所以猪哥也会坚持系列文章原创...

    测试小兵
  • 【杂谈】爬虫基础与快速入门指南

    今天给大家分享一下网络爬虫的基础知识,以及一些优秀的开源爬虫项目。网络爬虫主要是我们在面对新的任务,但自己又没有数据的时候,获取自己想要的数据的一种手段。因此我...

    用户1508658
  • Python爬虫笔记(一):爬虫基本入门

    最近在做一个项目,这个项目需要使用网络爬虫从特定网站上爬取数据,于是乎,我打算写一个爬虫系列的文章,与大家分享如何编写一个爬虫。这是这个项目的第一篇文章,这次就...

    Angel_Kitty
  • Python爬虫-01:爬虫的概念及分类

    1.定义: 搜索引擎用的爬虫系统 2.目标: 把所有互联网的网页爬取下来,放到本地服务器形成备份,在对这些网页做相关处理(提取关键字,去除广告),最后提供一个...

    py3study
  • 你不可不知的Java引用类型之——Reference源码解析

    reference指代引用对象本身,referent指代reference引用的对象,下文介绍会以reference,referent形式出现。

    弗兰克的猫

扫码关注云+社区

领取腾讯云代金券