chrome 开发工具_我最喜欢的Chrome开发工具提示和技巧

chrome 开发工具

Chrome Developer Tools are a super powerful suite of tools for developing web applications. They can do so much, from very basic operations like traversing the DOM, to checking out network requests or even profiling your application's performance.

Chrome Developer Tools是用于开发Web应用程序的超强大工具套件。 他们可以做很多事情,从遍历DOM等非常基本的操作到签出网络请求甚至分析应用程序的性能。

Among the big, everyday features they enable, there are quite a lot of gems to be found if you look deep enough. Features that might save you a click or two – and isn't that what we're all about here?

在它们启用的日常功能中,如果您看起来足够深,就会发现很多宝石。 可以节省您一两次点击的功能-难道不是我们在这里所拥有的一切吗?

控制台中的jQuery风格DOM查询 (jQuery style DOM queries in the console)

jQuery is awesome. It has ruled the web for over a decade, and some statistics state that more than 70% of the most popular web pages in the world run some version of jQuery. That's crazy for a library dating all the way back to 2006.

jQuery很棒。 它已经统治了网络十多年,一些统计数据表明,世界上超过70%的最受欢迎网页都运行某种版本的jQuery。 对于一个可追溯到2006年的图书馆来说,这是很疯狂的。

The most popular API jQuery provides is the $, used for selecting DOM elements. The Chrome dev tools console allows you to make use of that $ selector, and more. Under the hood, $ is an alias to document.querySelector().

jQuery最受欢迎的API是$ ,用于选择DOM元素。 Chrome开发者工具控制台可让您使用$选择器等。 在幕后, $document.querySelector()的别名。

For example, if you want to simulate a click on an element you can do:

例如,如果要模拟元素的单击,可以执行以下操作:

Similarly, $$ is an alias to document.querySelectorAll():

同样, $$document.querySelectorAll()的别名:

There are a few more tricks up the $ sleeve. Sometimes, a selector might be too complicated to write by heart, or you just don't know a selector specific enough. If you pick an element in the Elements tab you can retrieve it with the $0 variable in the console:

$袖子还有一些技巧。 有时候,选择器可能太复杂而无法用心书写,或者您只是对选择器不够了解。 如果在“元素”选项卡中选择一个元素,则可以在控制台中使用$0变量进行检索:

The console goes even further, allowing us to access not only the last selection, but the last 5, in order. The selections are exposed through the $0 - $4 variables:

控制台走得更远,使我们不仅可以访问最后一个选择,而且可以依次访问最后五个。 通过$0 $4变量公开选择内容:

复制元素的属性 (Copying an element's properties)

The elements tab is a really useful tab. It stores our website DOM tree, it allows us to see the CSS applied to each element, and we can make changes to elements on the fly from it.

元素选项卡是一个非常有用的选项卡。 它存储了我们的网站DOM树,它使我们能够看到应用于每个元素CSS,并且我们可以从中动态更改元素。

A really cool trick I've found is the ability to copy properties of an element (and not only properties) from the context menu.

我发现一个非常酷的技巧是能够从上下文菜单中复制元素的属性(不仅是属性)。

For example, you can copy an element's selector:

例如,您可以复制元素的选择器:

This selector might not be specific enough, or too specific for production, but should make your life a little easier when debugging.

这个选择器可能不够具体,或者对于生产来说太具体了,但是在调试时应该会使您的生活更轻松一些。

As you can see in the previous gif, the copy context menu hides a few more nifty things you can copy. You can copy the element's styles, JS path (document.querySelector(SELECTOR)) or XPath.

正如您在上一个gif中看到的那样,复制上下文菜单隐藏了一些可以复制的漂亮东西。 您可以复制元素的样式,JS路径( document.querySelector(SELECTOR) )或XPath。

过滤网络请求 (Filtering network requests)

Sometimes, you work on a page that has a lot of requests. I mean, A LOT.

有时,您在一个有很多请求的页面上工作。 我的意思是,很多。

Working your way through all those requests can be difficult when you look for something specific. Thankfully, you can very easily filter the requests.

当您寻找特定的内容时,很难解决所有这些请求。 幸运的是,您可以非常轻松地过滤请求。

The filter toolbar has quick toggles for various request types, such as XHR/Fetch, stylesheets, JS scripts, images and more:

过滤器工具栏可快速切换各种请求类型,例如XHR / Fetch,样式表,JS脚本,图像等:

If you need to be even more specific, or so that you might find it quicker, you can just write a filter criteria in the filter input right above the toolbar to search in the requests' names:

如果您需要更加具体,或者为了更快地找到它,可以在工具栏上方的filter输入中编写过滤条件,以搜索请求的名称:

模拟不同的网络速度 (Emulating different network speeds)

Using the Network tab again we can test our site in various internet speeds. The default preset is online, and you'll enjoy the full bandwidth of your internet connection.

再次使用“ Network选项卡,我们可以各种互联网速度测试我们的网站。 默认预设为online ,您将享受互联网连接的全部带宽。

Besides online, there are a few more presets available: Fast 3G, Slow 3G and offline, which vary in upload speed, download speed and latency. If you need to emulate a different, more exotic speed, you can add your own profile through the Add... button:

除了online ,还有更多可用的预设: Fast 3GSlow 3Goffline ,它们的上载速度,下载速度和延迟有所不同。 如果需要模拟另一种更奇特的速度,可以通过“ Add...按钮Add...自己的配置文件:

在控制台中使用实时表达式 (Using Live Expressions in console)

What are Live Expressions?

什么是Live Expressions

Live Expressions are expressions which evaluate constantly at the top of your console. Say, you want to track a variable's value over time. You can log it over and over and over again:

Live Expressions是在控制台顶部不断求值的表达式。 假设您要跟踪一段时间内变量的值。 您可以一遍又一遍地记录它:

With Live Expressions, you can focus on your code, and let Chrome do the monitoring:

借助Live Expressions ,您可以专注于代码,并让Chrome进行监视:

This applies for variables defined both in the console and in a script.

这适用于在控制台和脚本中定义的变量。

模拟不同的设备 (Emulating different devices)

Those of us working on responsive applications know the feeling where you work really hard to make a beautiful layout, only to see it misbehave on devices with different resolutions.

我们那些从事响应式应用程序工作的人都知道,您很难在哪里做出漂亮的布局,只是发现它在不同分辨率的设备上表现不佳。

I'm not here to tell you about media queries, but rather a convenient way to test that they work.

我不是在这里向您介绍媒体查询,而是一种方便的方法来测试它们是否有效。

When you click on the button that looks like a tablet and a phone, you'll see that your browser's viewport changes to reflect a different device's dimensions.

单击看起来像平板电脑和电话的按钮时,您会看到浏览器的视口发生变化以反映其他设备的尺寸。

You can choose a device from a list of presets containing various popular devices, such as iPhone X, iPad Pro, Pixel 2, Pixel 2 XL and more. The list is admittedly a bit outdated, but I think it's good enough for most cases.

您可以从包含各种常用设备的预设列表中选择一种设备,例如iPhone X,iPad Pro,Pixel 2,Pixel 2 XL等。 列表当然已经过时了,但是我认为对于大多数情况来说已经足够了。

If you can't find a device that fits your needs, you can set a custom resolution. As you can see, I've set a custom resolution to emulate a OnePlus 6 (which is my daily driver).

如果找不到适合您需求的设备,则可以设置自定义分辨率。 如您所见,我已经设置了自定义分辨率来模拟OnePlus 6(这是我的日常驱动程序)。

强制元素的状态 (Forcing an element's state)

Have you ever faced a situation where you wanted to play with an element's :hover-specific CSS, but every time you moved your mouse to the styles section in the dev tools the element was no longer hovered?

您是否曾经遇到过要使用元素的:hover特定CSS的情况,但是每次将鼠标移至开发工具中的styles部分时,该元素就不再悬停了吗?

Well, Chrome dev tools exposes a nice way to lock an element's state, so you can fiddle with its properties with peace. This way you can quickly toggle an element's :active, :hover, :focus, :focus-within and :visited properties:

不错,Chrome开发人员工具提供了一种锁定元素状态的好方法,因此您可以安心地使用它的属性。 这样,您可以快速切换元素的:active:hover:focus:focus-within:visited属性:

Those are my tips and tricks I think everyone can benefit from. Thank you for reading!

这些是我认为每个人都可以从中受益的提示和技巧。 感谢您的阅读!

This article was previously published on my blog: dorshinar.me. If you want to read more content, you can check out my blog as it would mean a lot to me.

该文章先前已发布在我的博客dorshinar.me上 。 如果您想内容,可以查看我的博客,因为这对我来说意义重大。

Buy Me a Coffee at ko-fi.com

翻译自: https://www.freecodecamp.org/news/awesome-chrome-dev-tools-tips-and-tricks/

chrome 开发工具

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/390428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三十四 Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解

信号一般使用信号分发器dispatcher.connect(),来设置信号,和信号触发函数,当捕获到信号时执行一个函数 dispatcher.connect()信号分发器,第一个参数信号触发函数,第二个参数是触发信号, 以下是各种信号 sig…

1713. 得到子序列的最少操作次数

给你一个数组 target ,包含若干 互不相同 的整数,以及另一个整数数组 arr ,arr 可能 包含重复元素。 每一次操作中,你可以在 arr 的任意位置插入任一整数。比方说,如果 arr [1,4,1,2] ,那么你可以在中间添…

CVE-2018-1000136:Electron nodeIntegration绕过漏洞

1周前,研究人员发现一个影响Electron所有版本的漏洞,利用该漏洞可以开启nodeIntegration,这可能会造成远程代码执行。Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架,它负责比较难搞的部分,而用户…

bash脚本 文件_如何使用Bash脚本来管理从AWS S3存储桶下载和查看文件

bash脚本 文件As you can read in this article, I recently had some trouble with my email server and decided to outsource email administration to Amazons Simple Email Service (SES). 正如您在本文中所读到的 ,最近我的电子邮件服务器遇到了一些麻烦&…

rsync(六)命令中文手册

rsync(1) rsync(1)名称rsync - 一个快速、多功能的远程(和本地)文件拷贝工具摘要Local: rsync [OPTION...] SRC... [DEST]Access via remote shell:Pull: rsync [OPTION...] [USE…

NFS共享存储服务部署

服务端部署 1、检查服务器上是否已安装nfs及rpc,没有则需要安装检查rpm -qa rpcbind nfs-utils安装(已安装略过)yum install -y rpcbind nfs-utils################################################################2、编写nfs的配置文件cat…

区块链运作机制_什么是区块链及其运作方式?

区块链运作机制If youre interested in technology, theres a good chance you’ve probably heard the terms Bitcoin, Crypto, Ethereum, or even "distributed, decentralized ledgers."如果您对技术感兴趣,那么您很有可能已经听说过比特币&#xff0c…

敏捷管理之绩效考核方案

前段时间,公司签了年终奖确认。觉得公司发放年终奖完全是凭主观发放,没有事实依据,由此产生了对如何发放年终奖的一些想法。 奖金发放作为激励员工最直接的手段,往往也是让管理人员最难抉择的,而且很多公司&#xff0c…

序言

为什么要写这篇文章? 说起架构,刚入行的新人觉得是高大上的技术,有工作经验的一些人又觉得是虚无缥缈的东西,不能落实。具体有用没用,我不给答案,想通过写这么一个例子来还原场景,让读者自己判断…

kotlin编程语言_Kotlin初学者编程基础

kotlin编程语言什么是Kotlin? (What is Kotlin?) Kotlin is a programming language developed by Jetbrains, the company behind some of the world’s most popular IDEs like IntelliJ and Pycharm.Kotlin是Jetbrains开发的一种编程语言,该公司是In…

记一个蒟蒻的绝望

感觉现在…… 怎么讲,心挺冷的。 今天一月五号了。距离省选,时间好短啊。 我还有那么多东西不懂。甚至听都没听说过。 等到真正去省选的时候,我可能跟现在一样,什么都不会。 我的名字能不能被看到都不知道。哈,还进队呢…

671. 二叉树中第二小的节点

给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 2 或 0。如果一个节点有两个子节点的话,那么该节点的值等于两个子节点中较小的一个。 更正式地说,root.val min(root.left.val, root.right.val) 总…

CentOS查询端口占用和清除端口占用的程序

1、查询端口号占用,根据端口查看进程信息 [rootserver2 ~]# lsof -i:80COMMAND PID USER FD TYPE DEVICE SIZE NODE NAMEhttpd 5014 root 3u IPv4 14346 TCP server2:http (LISTEN)2、根据进程号查看进程对应的可执行程序 ps -f -p 进程号# p…

Android基础夯实--你了解Handler有多少?

概述 对于刚入门的同学来说,往往都会对Handler比较迷茫,到底Handler是个什么样的东西。当然,可能对于一些有工作经验的工程师来说,他们也不一定能很准确地描述,我们来看下API的介绍。 Handler是用来结合线程的消息队列…

spring与springBoot不同之处

( 1)遵循“习惯优于配置”的原则,使用Spring Boot只需要很少的配置,大部分的时候我们直接使用默认的配置即可; (2)项目快速搭建,可以无需配置的自动整合第三方的框架; (3…

sketch-a-net_Adobe XD,Sketch,Figma,InVision-如何在2020年选择最佳设计软件

sketch-a-netComparing Adobe XD vs Sketch vs Figma vs InVision studio is a very common topic among designers who are looking for the best design software. 在寻求最佳设计软件的设计师中,比较Adobe XD,Sketch,Figma和InVision Stud…

merge intervals(合并间隔)

Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,10],[15,18],return [1,6],[8,10],[15,18]. 题目没有说所有间隔的start是依次增加的。所以,为了方便讨论,我们要将所有间隔按照start升序排列。因…

剑指 Offer 49. 丑数

我们把只包含质因子 2、3 和 5 的数称作丑数(Ugly Number)。求按从小到大的顺序的第 n 个丑数。 示例: 输入: n 10 输出: 12 解释: 1, 2, 3, 4, 5, 6, 8, 9, 10, 12 是前 10 个丑数。 说明: 1 是丑数。n 不超过1690。 解题思路 使用小根堆&#xf…

维护旧项目_为什么您的旧版软件难以维护-以及如何处理。

维护旧项目Believe it or not, some organizations still rely on legacy software to carry out operations even though newer and more versatile options are available. We know that “old is gold”, but legacy applications cannot glitter forever. As such, these o…

python--内置函数

内置函数现在python一共为我们提供了68个内置函数,讲述过程:一、其他中的12个 (一)执行 字符串 类型代码的执行 1 eval执行有意义的字符串 ,有返回值 print(eval(12))print(eval("print(美丽)")) #美丽 2 ex…