程序员经验分享-hwhale

10个值得了解的Chrome开发工具和技巧

2023-05-16

1. 模拟慢速网络和慢速设备

我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢？

打开谷个浏览器的performance选项卡，然后单击右上角的齿轮图标就可以看到 Newwork 和CPU的模拟情况。

1.png

2. 颜色选择器

单击表示颜色的小方块，弹出颜色选择器。

2.png

3.png

启用颜色选择器后，可以将网页悬停并使用颜色选择器来获取该像素的颜色。

4.png

5.png

弹出颜色选择器的小方块还有快捷键按住Shift并单击以更改颜色格式。

3. Audits

Audits（审计）,这个功能其实一直存在，只不过在chrome 60之后，发生了翻天覆地的变化：引入了Google开源的另外一个项目：LightHouse。

Audits主要从5个方面来给网页打分，最终会生成一个report:

4.Pretty Print（显示可读代码）

6.png

我们知道许多网站都对Javascript代码进行了压缩，但这对开发者和学习者来说，读起来很费劲，谷歌提供一个功能给我们，可以更好查看压缩文件。

我们点击下方的大括号｛｝图标，即可使用Pretty Print功能了

7.png

5.快速文件切换器

如果你知道文件名，则不必打开“Sources”选项卡。只需按cmd/ctrl + p，然后输入你想查找的文件名，接下按下回车就 ok 了。

6. 响应模式

我们在桌面和移动设备上开发网站，通常我们倾向于最初的桌面体验。 但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验，我们需要准确地知道网站在移动设备上的效果。 Chrome 开发者工具包里加入了手机模拟器特性，帮助我们测试：

8.png

对于大多数人而言，大多数时间只需要通过不同的屏幕尺寸和方向查看他们的网站即可。

9.png

我和阿里云合作服务器，折扣价比较便宜：89/年，223/3年，比学生9.9每月还便宜，买了搭建个项目，熟悉技术栈比较香（老用户用家人账号买就好了，我用我妈的)推荐买三年的划算点，点击本条就可以查看。

Icomo

7.屏幕截图

1、F12

2、【ctrl+shift+p】

3、输入“capture”

4、选择以下任意

  1. capture full size screenshot”【整个网页】
  2. capture node screenshot”【节点网页】
  3. “capture screenshot”【当前屏幕】

8. Extensions

我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名，以简化其技术（Vue，Angular，React等）的开发。 这是Featured DevTools扩展的列表。

9. Coverage

Coverage 是chrome开发者工具的一个新功能，从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的，如图，这是我在打开csdn网页时，所显示的已运行和尚未运行的代码情况。

10.png

如何打开caverage 前提：chrome浏览器的版本必须是59或以上，在ctrl+shift+i快速打开devtools，点击右上角的... More tools 有个Coverage。

那这个新功能有什么作用呢？

如上图所示，最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而青色表示已加载但未运行的代码。可用来发现页面中尚未用到的js 和 css代码，你可以为用户只提供必要的代码，这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用。

10. 实时跟进新功能

Chrome 的开发工具会不断更新，它会在What's New In DevTools 上发布更新的视频，我们可以时不是去看看，了解一些新出来的功能，这样我们就能实时知道谷歌的一些好用的功能了。

原文地址：https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9

作者：FelDev

更多编程相关知识，请访问：编程入门！！

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

10个值得了解的Chrome开发工具和技巧 的相关文章

  • 详解HTML文档声明（DOCTYPE）

    HTML文档通常以类型声明开始 xff0c 该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型 本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行 且顶格显示 xff0c 对大小写不敏感 因为任何放在DOC

  • CSS 不定宽高的垂直水平居中（9种方法）

    垂直居中 xff0c 在 CSS 中是一个老生常谈的问题 xff0c 面试的时候也会时常被提及 所以 xff0c 今天我们就来聊聊 9 种不同的居中方法 有常见的 flex transform absolute 等等 也有 CSS3 的网格

  • html5不常用标签应用场景

    作为一个前端开发 xff0c 在浏览别人家的页面时总是会习惯性的查看他们页面的源码 xff0c 发现大多数网站的页面 xff0c 包括我自己写的页面中用到的最多的布局元素无外乎就是div p span ul dl ol li dt dd s

  • HTML的16个全局属性介绍

    在HTML中 xff0c 属性能表达相当丰富的语义 xff0c 而且属性也会额外提供很多实用的功能 xff0c HTML共支持16个常见的全局属性 HTML原有属性 accesskey 作用 xff1a 浏览器用来创建激活或聚焦元素的快捷键

  • 聊聊JavaScript作用域

    几乎所有的语言都有作用域的概念 xff0c 简单的说 xff0c 作用域就是变量和函数的可访问范围 xff0c 即作用域控制在变量和函数的可见性和生命周期 变量作用域 是程序源代码中定义这个变量的区域 1 全局变量拥有全局作用域 xff0c

  • CSS布局方案大全【整理】

    我们在日常开发中经常遇到布局问题 xff0c 下面罗列几种常用的css布局方案话不多说 xff0c 上代码 xff01 居中布局 以下居中布局均以不定宽为前提 xff0c 定宽情况包含其中 1 水平居中 a inline block 43

  • 你必须知道的一些HTML优化技巧

    如何提升Web页面的性能 xff0c 很多开发人员从多个方面来下手如JavaScript 图像优化 服务器配置 xff0c 文件压缩或是调整CSS 很显然HTML 已经达到了一个瓶颈 xff0c 尽管它是开发Web 界面必备的核心语言 HT

  • 常见的CSS图形绘制合集

    展示40多个常见的纯CSS绘制图形 xff0c 效果实时 xff0c 含源代码 xff0c 想要什么效果直接复制粘贴就好了 就算项目用不到 xff0c 看看别人代码怎么写的也有助于提高CSS的基本功 以下这些造型简单的图形都是纯CSS外加一

  • 扩展Vue.js组件

    您的Vue应用程序中是否有共享类似选项的组件 xff0c 甚至模板标记 使用公共选项和标记创建基本组件 xff0c 然后扩展基本组件以创建子组件 xff0c 这是一个好主意 这样的体系结构将帮助您在代码中应用DRY原则 不要重复您自己 xf

  • Node.js日志记录指南

    当你开始用 JavaScript 进行开发时 xff0c 可能学到的第一件事就是如何用 console log 将内容记录到控制台 如果你去搜索如何调试 JavaScript xff0c 会发现数百篇博文和 StackOverflow 文章

  • 软件测试的测试方法及测试流程

    一 测试方法 xff1a 白盒测试 xff1a 把软件比作一个打开的盒子 xff0c 可以看到软件代码的实现 xff0c 针对代码的实现验证代码是否存在问题 单元测试阶段采用的测试方法 灰盒测试 xff1a 介于白盒和黑盒测试之间 灰盒测试

  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目

  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合

  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje

  • 关键CSS和Webpack：自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时

  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如

  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变

  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量

  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x

  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难

随机推荐

  • 知道要测试什么——Vue组件单元测试

    关于单元测试Vue组件 xff0c 我看到的最常见的问题是 我到底应该测试什么 虽然测试过多或过少都是可能的 xff0c 但我的观察是 xff0c 开发人员通常会在测试过多时犯错误 毕竟 xff0c 没有人愿意成为一个组件测试不足导致应用程

  • 软件测试 | 测试开发书单 | 测试工程师必读经典好书，你读过几本？

    测试好书1080 480 46 3 KB 软件测试入行容易进阶难 在持续交付体系背景下 xff0c 要成为测试开发高手意味着非常系统综合的知识储备 广泛阅读经典好书是快速成长的必要方式 霍格沃兹测试学院重点推荐几本测试经典好书以及必读清单

  • 使用webpack提升vue.js应用程序的四种方法

    Webpack是开发Vue js单页面应用程序的必要工具 通过管理复杂的构建步骤 xff0c 它使您的开发工作流更加简单 xff0c 并且可以优化应用程序的大小和性能 在本文中 xff0c 我将解释Webpack提升Vue应用程序的四种方法

  • 了解Node.js中的流（Stream）

    Node js 中的流 xff08 Stream xff09 是出了名的难用甚至是难以理解 用 Dominic Tarr 的话来说 xff1a 流是 Node 中最好的 xff0c 也是最容易被误解的想法 即使是 Redux 的创建者和 R

  • 深入了解Vue.js的作用域插槽

    作用域槽是Vue js的一个有用特性 xff0c 它可以使组件更加通用和可重用 唯一的问题是它们很难理解 试着让你的头在父母和孩子的范围内交织 xff0c 就像解决一个棘手的数学方程 当你不能很容易地理解某件事时 xff0c 一个好的方法是

  • JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function 算法内在的逻辑决定了如何转换 基础算法 一 排序 1 冒泡排序 冒泡排序function bubbleSort arr for var i 61 1 l

  • HTML中的meta标签属性的使用

    之前学习前端中 xff0c 对meta标签的了解仅仅只是这一句 lt meta charset 61 34 UTF 8 34 gt 但是打开任意的网站 xff0c 其head标签内都有一列的meta标签 下面我们就来详细介绍一下meta标签

  • 移动端H5开发常用小技巧（总结）

    本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享 xff0c 这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题 xff0c 希望能给大家带来或多或少的帮助 html 篇 常用的meta属性设置 meta对于移动端的一些特殊

  • JavaScript中Switch语句的使用方法

    除了if else之外 xff0c JavaScript还有一个称为switch语句的功能 switch是一种条件语句 xff0c 它将针对多种可能的情况评估表达式 xff0c 并根据匹配的情况执行一个或多个代码块 switch语句与包含许

  • 如何构建可运行的JavaScript规范

    编程不仅仅是给计算机下达如何完成一项任务的指令 xff0c 它还包括以一种精确的方式与他人交流思想 xff0c 甚至是与未来的自己 这样的交流可以有多个目标 xff0c 也许是为了共享信息 xff0c 或者只是为了更容易地修改 如果你不理解

  • javascript中函数的5个高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符

  • 理解JavaScript中的原型和继承

    本文主要讲了原型如何在JavaScript中工作 xff0c 以及如何通过 Prototype 所有对象共享的隐藏属性链接对象属性和方法 xff1b 以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值 介绍 JavaScrip

  • 大学毕业后转行软件测试我后悔了

    来自一篇新学员的留言 大学本科幼师专业 xff0c 家里人都想让我考教师资格证 xff0c 等毕业了当一名人民教师 xff0c 说这个职业是一辈子的铁饭碗 xff0c 风吹不着雨淋不到 xff0c 还有寒暑假 xff0c 找个离家近的 xf

  • 分享5个JS函数的高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符

  • 详解vue.js中watch的使用

    在vue中 xff0c 使用watch来响应数据的变化 watch的用法大致有三种 下面代码是watch的一种简单的用法 xff1a lt input type 61 34 text 34 v model 61 34 cityName 34

  • Vue中值得关注的21个开源项目（推荐）

    Vue 相对不于 React 的一个优点是它易于理解和学习 xff0c 且在国内占大多数 咱们可以在 Vue 的帮助下创建任何 Web 应用程序 因此 xff0c 时时了解一些新出现又好用的Vue 开源项目也是挺重要 xff0c 一方面可以

  • javaScript面向对象的三个基本特征介绍

    了解过面向对象的同学应该都知道 xff0c 面向对象三个基本特征是 xff1a 封装 继承 多态 xff0c 但是对于这三个词具体可能不太了解 对于前端来讲接触最多的可能就是封装与继承 xff0c 对于多态来说可能就不是那么了解了 封装 在

  • 7个实用的CSS background-image小技巧

    xff08 推荐教程 xff1a CSS教程 xff09 background image可能是我们所有人 xff08 前端开发人员 xff09 在我们的职业生涯中至少使用过几次的CSS属性之一 大多数人认为背景图像没有什么不寻常的 xff

  • 值得收藏的css grid构建复杂布局的小技巧！

    xff08 推荐教程 xff1a CSS教程 xff09 网格布局是现代CSS中最强大的功能之一 使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的 快速响的布局 在这篇文章中 xff0c 将会介绍所有我们需要了解的 CS

  • 10个值得了解的Chrome开发工具和技巧

    1 模拟慢速网络和慢速设备 我们可能习惯了在城市的网速 xff0c 那是杠杠的 xff0c 并不意味网速在中国哪个都一样的 xff0c 在一些偏远地方 xff0c 网速依然慢的可怜 xff0c 所以有时候我们所做的产品是需要考虑网速慢的情况

热门标签