Chrome devtools 打开耗时

最新推荐文章于 2025-03-28 10:17:41 发布
最新推荐文章于 2025-03-28 10:17:41 发布
阅读量286 收藏
点赞数
分类专栏： 前端 文章标签： chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33641175/article/details/120541845
版权
这篇博客探讨了Chrome浏览器在选择不同区域语言版本（如'English(UK)'）时，开发者工具（DevTools）加载时间显著延长的现象。用户报告在选择'English(UK)'时，DevTools的打开需要大约6秒，而选择'English(US)'或中文版则没有此问题。这可能涉及到浏览器本地化设置对性能的影响，对于开发者优化工作流程和理解浏览器行为具有重要意义。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Chrome(94.0.4606.61) 的devtools的语言选择"English (UK)"时, 打开会耗时 6秒, 选择 “English (US)” 和 中文, 不会有这个问题

Web开发中Chrome DevTools攻略（深入理解和利用开发者工具、元素面板和控制台、网络和资源面板、应用和源代码面板等等）
半夏微凉科技
05-17 1290
Chrome开发者工具（DevTools）是Web开发中不可或缺的利器，它提供了一系列强大的功能，帮助开发人员调试、优化和审查网页。本文将深入探讨Chrome DevTools的各种功能和技巧，帮助你更好地利用这个工具来提升你的Web开发技能。
Chrome DevTools攻略
数字人生
05-29 1365
Elements（元素）：用于查看和编辑HTML元素和CSS样式，实时预览修改效果。Console（控制台）：显示JavaScript运行时的错误和警告信息，支持直接输入JavaScript代码执行。Sources（源代码）：调试JavaScript代码，设置断点，查看和编辑源文件。Network（网络）：分析网页资源加载情况，包括时间线、大小、HTTP头信息等，帮助优化性能。（性能）：记录和分析页面加载和脚本执行的时间线，找出性能瓶颈。Memory。
如何使用 chrome devtool 分析前端代码执行耗时和内存占用
weixin_43487782的博客
01-31 4469
如何分析代码执行耗时 代码执行耗时这块，大家应该都知道使用 Performance 面板中的 火焰图，火焰图中每个方块的宽度代表执行耗时，方块叠加的深度代表调用栈的深度。通过火焰图可以很直观地展示出代码调用关系，当你不熟悉某个框架、源码中的代码逻辑，又不希望一行行去看源码，火焰图就是最好的工具。 在分析性能的时候，为排除插件的影响，需要启用无痕模式 此外我们还可以看到每一行代码执行的时间。在火焰图中找到长任务，点击顶部 Task，点击 Button-Up，这时候可以看到根据耗时列出的调用栈： 找到那个
chrome devtools使用详解——Performance
weixin_34061555的博客
11-30 425
本文是学习&研究笔记，若有错误还请指正！ 相关文章 Elements篇 Sources篇 当页面卡顿、慢时可以使用Performance来分析问题原因所在。 面板 Performance，即运行时性能表现，面板如下： 使用 使用隐身窗口，打开项目（比如在线测试DEMO） 点击录制按钮（黑点），开始记录此段时间内页面运行性能 点击stop停止 面板功能分析 如下划分成4...
Chrome DevTools Performance 功能详解
m0_60212972的博客
05-07 2362
本文介绍 Chrome DevTools Performance 面板的所有功能，以便使用其分析页面加载时/运行时性能，找出性能瓶颈。
解决Chrome谷歌浏览器开发者工具DevTool打开慢问题
Dreambred
11-02 2647
最近Chrome更新后提示是否将DevTool语言设为中文，设为中文后感觉不适应，又切回英文，但是有个UK、US英文，选了个UK，后面发现每次打开开发者工具都要卡几秒，很慢，最后才发现是语言设置问题，UK切换为US瞬间恢复了正常的打开速度； ...
Chrome DevTools 性能分析
最新发布
monk all the way
03-28 482
/ 标记代码执行区间// 执行需要测量的代码// 测量时间差// 获取测量结果console.log('处理耗时:', measures[0].duration)
Chrome DevTools基本操作和功能介绍
工作的日常记录和平凡的生活分享
05-30 1699
Chrome DevTools 是一套内置于 Google Chrome 浏览器中的开发者工具集，它为前端开发者提供了调试网页的强大功能。通过 DevTools，开发者可以进行性能分析、网络状况监控、JavaScript 调试、代码编辑、模拟移动设备测试等。专为开发者设计，用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素，到深入的性能分析和网络通信追踪。
Chrome DevTools攻略（MD编辑器）
bemonroden的博客
05-28 403
通过使用DevTools，可以更加高效的定位页面布局问题，设置JavaScript断点并且更好的理解代码优化。在Elements面板中你可以通过DOM树的形式查看所有页面元素，并且可以对其进行所见即所得的编辑。随着JavaScript程序复杂度的增加，开发者需要更加强大的debug工具来快速的发现问题并高效的修复。在Timeline面板中，你可以从整体上看到在web页面加载和被使用的过程中时间消耗在哪里了。在每个工具栏选项卡和对应的操作面板中，你可以处理某项特殊的任务，例如DOM元素，资源和源码。
Chrome Dev Tool 中时间线各阶段代表的意义
柏灿的博客
06-14 890
Queueing(排队时间)如果某个请求正在排队，则指示：请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况。请求已被暂停，以等待将要释放的不可用 TCP 套接字。请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接。生成磁盘缓存条目所用的时间（通常非常迅速）Stalled（也即是从TCP连接建立完成，到真正可以...
Network Resource Timing 我的请求慢在哪
weixin_33804582的博客
06-01 511
前言 如果我们发现自己页面加载慢，通常会打开DevTools的Network栏找到具体的慢的请求，那他到底慢在哪呢？ Timing包含的内容 Queuing Stalled/Blocking Proxy Negotiation DNS Lookup Initial Connection / Connecting SSL Request...
Chrome 的 开发者工具（F12、devtools）开启缓慢解决方法
热门推荐
qq_45095621的博客
09-10 1万+
最开始我是更新了Chrome然后我打开控制台的时候给我报了个弹框，不小心点了一下，然后发现打开devtools的时候变慢了，我去devtools的设置看了一下，没怎么搞明白，直接给它恢复默认了事。现在可以用来 首先进入设置，点一下按钮 然后就是这样，看不懂英文就换个语言吧，~~，然后往下划，滑到底 现在就变成了这样 最后点击一下就好，最后就是这样了，上面会有一个选择，别乱点，不然又回到原样，吸取教训 点一下那个红框的按钮，至于为什么要点，别问，强迫症受不了 ...
秒解DevTools was disconnected(devtools与网页连接断开)
我不喜欢这个世界
01-08 1万+
DevTools was disconnected from the page. Once page is reloaded,DevTools will automatically reconnect（devtools与网页连接断开），这个是新版本兼容性的问题，不用来回找方案解决这个问题，只能切换到旧版本的，直接卸载现在的版本，卸载时候保留数据，旧版本安装上你原有的书签啥的一样存在。链接：https://pan.baidu.com/s/1THl8g-Tw26Ra1Lk_fgezyg?
其他——调试时chrom崩溃
GIS特战兵
12-08 4040
问题：在调试的时候页面经常崩溃，报错原因时内存溢出，在调试面板弹出如下信息： DevTools was disconneced from the page. Once page is reloaded,DevTools will DevTools与页面断开连接。页面重新加载后，DevTools将重新链接。 解决：安装合适的chrom 因为同事的电脑配置好一些从没出现这情况，所以我一直以为是自己电脑配置太低，直到发现自己chrom不是64位的就还了一个然后问题就没有了。 哎小问
前端常用工具函数及Chrome Devtools常用调试技巧总结
前端开发工程师博客
04-27 362
1.日期格式化 有些时候，可能在一个项目里，后端返回的日期格式并不是我们需要的格式，而又不想因此而引入一个大小有10多k的moment.js，这种情况下，我们可以考虑自己封装一个日期格式化函数。 /** * @description 日期格式化，只需传入时间戳或者时间格式的字符串及要转换的时间格式 * @param {Number} timestamp 时间戳或者时间格式的字符串 * @param {String} format 时间格式，默认YYYY-MM-DD hh:mm:ss *
Chrome DevTools 全攻略！助力高效开发
weixin_46837985的博客
07-27 1426
李华西，微医云服务团队前端开发工程师，喜欢瞎折腾，典型猫奴Console 面板此章节请打开 justwe7.github.io/devtools/console/console.html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值