google-chrome-devtools_编程技术问答社区_程序员问答知识库

以下是关于 google-chrome-devtools 的编程技术问答

注意：图中显示的是临时头像

我无法调试此消息，该消息看起来像一周前. 我尝试恢复旧文件，但这很奇怪，没有解决我的问题. so:我有两个长期的投票请求. (关闭其中之一无济于事). 例如，这是其中之一: public function update_private_messages_ajax_handler(){ global $wpdb; global $bp; $chat_table = $wpdb->prefix . 'bp_dollars_chat'; $current_user = $bp->loggedin_user->id; ob_start(); header("Content-Type: application/json"); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Sat, 26 Jul 1997 05:00:

0 2023-05-28 编程技术问答社区 php ajax google-chrome-devtools comet long-polling

Phantomjs page.onConsoleMessage不记录警告信息

我正在使用phantomjs通过挂接控制台消息在我的页面上检测错误/警告: page.onConsoleMessage = function(msg, line, source) { console.log(msg); } page.open(page.address, function (status) { if (status !== 'success') { console.log('Fail to load the address'); } else { for(var i=0;i

0 2023-05-25 编程技术问答社区 javascript console google-chrome-devtools phantomjs

什么时候 "开始分析并重新加载页面 "决定停止自动记录？

我在Chrome Devtools中使用了大量的性能时间表来捕获我的页面的性能记录. 大多数时候我都使用"开始分析和重新加载页面"，该页面会自动启动并停止录音. 问题是: devTools何时决定停止录制? 我注意到，它总是在" load" - 事件上始终保持至少数百ms的记录，并试图弄清楚页面何时"大部分闲置". ，但这是一个非常模糊的猜测.我很想知道它是否依赖某些表演事件(例如，灯塔中的"时间交互式"中使用的事件)? 解决方案目前等待 this._millisecondsToRecordAfterLoadEvent = 3000; async _loadEventFired(event) { if (this._state !== Timeline.TimelinePanel.State.Recording || !this._recordingPageReload || this._controller.mainTarget(

0 2023-05-24 编程技术问答社区 google-chrome-devtools performance-testing devtools

在Chrome DevTools中测量全页面大小

我已经谷歌搜索了一段时间，但还没有找到任何明确的解决方案. 我想测量完整的网页重量/大小(所有文档 +脚本 +字体 +样式等).我知道DevTools中的网络选项卡具有大小/内容 - 但我想将其概括(并且每次都不总结). 我一直在寻找chrome.devtools. 您有一些想法如何实现吗? 解决方案在"网络"选项卡中，确保检查"禁用缓存"，然后加载页面时，查看底部面板查看总传输大小.请参阅下面的屏幕截图: 各个尺寸是圆形的，但是底部的总尺寸使用了字节大小，您可以在HAR中看到.然后将总数四舍五入以显示.如果您发现求和个人与DevTools所示的总数之间有些不匹配，那就是原因.

0 2023-05-24 编程技术问答社区 google-chrome web google-chrome-devtools performance-testing

在服务器请求后测量JSF视图的呈现时间

我想测量JSF应用程序的渲染时间.由于我的电源原因，该应用程序无法用日志填充. 因此，我的问题是，在执行包含任何浏览器的后端(服务器)调用的某个操作之后，有什么方法可以测量应用程序的渲染时间? 到目前为止，使用Chrome开发人员工具后，我发现了以下内容.在"网络"选项卡上，每个请求都显示"时间".此外，在"定时"选项卡上选择了某个条目后，它显示了一个更详细的可视化. 现在，我可以从"等待"中可以看出，这里捕获的服务器的往返行程，但是实际的渲染时间又如何. 假设整个请求占1秒，而等待部分是500ms，我可以扣除渲染是1秒-500ms吗?我认为不是，那就是为什么我问这个问题. 长话短说，我需要从浏览器中知道服务器处理多长时间以及实际UI渲染多长时间. 任何提示都将不胜感激.谢谢. 解决方案您可以使用自定义ViewDeclarationLanguage whereby you measure the buildView() . 如有必要， restor

2 2023-05-24 编程技术问答社区 jsf-2 rendering google-chrome-devtools performance-testing

有什么办法可以找到关于使用chrome开发工具发布的对象的任何信息吗？

我有以下代码: var constructors=[]; var counter = 0; function start() { for (var i=100; i> 0; i--) { constructors.push(new arrayValues()); } if (counter

0 2023-05-24 编程技术问答社区 javascript performance memory-management google-chrome-devtools

在Chrome开发工具时间线框架中的额外渲染时间

有很多视频和教程旨在减少使用开发工具的框架的合成，布局和油漆时间，但是我不明确该怎么办，一旦这些时间远低于分配的时间，但是框架仍然花费太长时间才能渲染. 确定框架中确切发生的事情的任何技巧，这会导致它如此缓慢地渲染? 解决方案 Paul Irish和Paul Lewis访问了这个话题

0 2023-05-24 编程技术问答社区 performance google-chrome-devtools

Chrome性能分析器中的'计时'标签缺失

因此，我在 timings 部分中成功监视了 performance tab Chrome开发人员工具的性能../p> 突然在该应用程序的特定重新加载上，时机 tab 缺少. 我尝试重置Chrome，重新启动计算机并更改开发人员工具中的一堆选项，但似乎无效. 有人可以解释发生了什么以及如何解决这个问题? 任何帮助将不胜感激.谢谢！解决方案因此，Reddit上的用户通过 pie6k 帮助我解决了这个问题.我在下面改写了他的回答，并进行了一些修改，使它对我有用. 开始录制重新加载应用程序做您想测量的事情停止录制是的，这不是最好的体验，但至少它有效. 来源: g88aj9

0 2023-05-24 编程技术问答社区 performance react-native google-chrome-devtools profiler react-devtools

在谷歌浏览器中出现了新的复合层，原因是内容不可扭曲

当Chrome Profiler说"层是分别合成的，因为它不能被压制了" 是什么意思." 我正在对我的HTML进行更改，我在相对DIV中引入了固定位置DIV，并在其上给出了will-change:transform.完成该铬后，创建了另外两个新层作为副作用.我想了解导致Chrome创建这些新复合层的确切原因，以及在Chrome中触发这种新层的作用. . 如果有帮助，这是屏幕截图. ps-我正在在角应用上运行性能分析，并找到了这个东西. 解决方案无法执行挤压的原因有很多.我找不到太多的信息，但是查看C ++代码，有一个 Squashingdisloweredreasons 与Map的理由进行课程，这可能会使您有所了解.您可以将您的DOM元素与原因进行比较. { CompositingReasonOverlap, "overlap", "Overlaps other composited content" }, { Com

0 2023-05-24 编程技术问答社区 html performance google-chrome google-chrome-devtools

计算和验证第一字节时间（TTFB）。

i获得了以下公式，以测量第一个字节(TTFB)，TTFB到DOM准备和页面加载的时间. . ttfb window.performance.timing.responseStart - window.performance.timing.navigationStart TTFB到DOM准备 window.performance.timing.domComplete - window.performance.timing.navigationStart 页面加载 window.performance.timing.loadEventStart - window.performance.timing.navigationStart 这些公式正确吗?我将如何检查它们?我听说您可以在Firebug的网络面板中测量它们，但总体而言，检索值似乎很麻烦.不确定您从chrome中获得值的位置. 那么，如何确定这些测量值? 解决方案 Firebug实际上

4 2023-05-24 编程技术问答社区 performance google-chrome-devtools firebug pagespeed firefox-developer-tools

为什么chrome的缓存请求需要时间？

即使chrome是在"网络"选项卡中缓存静态文件(js，images等)，这些文件的某个时间如下图所示. ，许多缓存文件仅在0ms中加载.有人可以告诉我即使文件从缓存加载，为什么要加载> 0ms? 解决方案乍一看，即使镀铬来自缓存，也很奇怪地看到Chrome花费时间下载资源.这不是从您看到的Web服务器下载的时间.相反，我相信这是从本地数据库缓存下载所花费的时间. 检索任何数据都涉及一定数量的成本.资源基本上存储在Chrome的数据库中，要检索数据需要查找，这不是即时的.除了查找表中的数据外，还可能涉及一些处理，以将正确的数据推入内存，因为数据未准确存储如何使用.它可能被压缩，解压缩数据可能是一个缓慢的过程. 您可以在"网络"选项卡中看到，尽管似乎需要0 ms来检索一些资源，但是当您查看"定时"选项卡时，您会发现它实际上是将其舍入的.例如，我在下面的请求中看到0.08 ms停滞和0.02 ms下载，尽管它显示了网格中的0 ms. 更新: 我进一步研究了

0 2023-05-23 编程技术问答社区 performance google-chrome caching google-chrome-devtools

如何从chrome开发工具的性能框架中获取屏幕截图

使用Chrome Dev工具，如何在共享的精确时间获得精确的屏幕截图解决方案 Open DevTools-on-devtools: 开关DevTools对接模式到DevTools设置的单独窗口三点图标. (激活此选项时，您可以使用 ctrl shift d 切换docked docked/nivecked state) 通过按 ctrl shift> shift i 在Windows或⌥ i 在DevTools窗口专注时现在，在这个新的devtools-for-for-devtools窗口中: 打开Application选项卡展开/打开帧 - 顶部 - 图像单击左侧的任何图像URL查看右键单击图像本身，然后选择Save 重复3-4 找到当前显示的屏幕截图的URL: 单击Frames屏幕截图下的Frames中的相应绿色吧台使用元素选择器 ctrl shift c c 在devtools-for-devtools中现在，de

0 2023-05-23 编程技术问答社区 performance google-chrome google-chrome-devtools

如何衡量React 16中浪费的渲染？

我以前使用过 react-addons-perf tovenage 包装量通过Perf.printWasted()渲染.不幸的是，此软件包是在React 16中退休的，有利于Chrome的Performance Tab，该标签没有等效工具. 我知道 why-did-you-update 这并不完全相同. 在React 16中有任何方法可以测量浪费的渲染吗? 是的Dan Abramov在这个问题. 编辑09-2018 :最近宣布的React DevTools的Profiler，现在您可以将此工具用于渲染优化和分析.有关此工具以及如何在编辑09-2019 :React Dev工具收到了重大更新，现在您可以测量渲染器，并且有一个设置可以获取"为什么Why Why did-you-update" - 在RDT设置. 另一种选择是使用 why did-you-update ，您提到了它，但是与react-perf-addons"完全不完全相同"的区别在于，后一个工具使用

0 2023-05-23 编程技术问答社区 javascript performance reactjs google-chrome-devtools

如何在chrome的内联javascript中添加断点

我想调试我的JavaScript代码，并能够在Source Cances选项卡下成功放置断点. 但是，我遇到了一个问题，我想调试我的内联JavaScript代码.我们是否有任何Chrome调试工具功能使用我可以调试我的Inline JavaScript代码. 我也很好地使用firebug进行调试目的. ps:通过Inline JavaScript代码，我的意思是JS代码内部标签和同一文件. 解决方案可以使用动态脚本方法. Chrome提供了简单的解析器命令，该命令可以动态加载JS. [...] //# sourceURL=dynamicScript.js 此行告诉Chrome调试器，脚本标签中的整个脚本应解释为Dynamicscript.js文件.您可以在调试器列表上找到文件，并轻松设置断点或检查代码. 注意: @被#取代，以避免在不支持的浏览器上出错

0 2023-05-23 编程技术问答社区 performance debugging inline google-chrome-devtools

Chrome开发工具中的空闲和其他时间。为什么浏览器这么长时间都不活动？

"空闲"和"其他"时间中包含的时间是Chrome开发人员工具中的时间表选项卡中的sumary? 是什么造成如此多的不采取行动? 为什么会发生这些? 如何减少这些时间?有可能吗? 为什么浏览器不活动这么长时间(在空闲时间的背景下)? 在超过1.8秒的开始之初，什么都没有发生: 中间的"空闲"和"其他"占据了约0.3秒: 在将近3秒的末尾什么都没有发生: 在此示例中，我们有将近五秒钟的无活动浏览器... 解决方案当浏览器尚未完成页面上的最终渲染时，就会发生"空闲"状态恢复并完成它. 我们可以处理较长的"空闲"周期，例如，当浏览器等待同步响应时，该响应将在服务器端长期生成. "空闲"状态不应与"加载"状态相混淆，是浏览器实际上上传响应的时间(从第一个到最后一个字节)，而不是从发送请求上传响应. "其他"状态代表除饼图中列出的所有浏览器活动的时间，例如DOM Tree Building，CSSOM等. 此问题部分在

0 2023-05-23 编程技术问答社区 performance google-chrome google-chrome-devtools timeline developer-tools

在Chrome Perfomance DevTools中不明确的'任务&39;。

Chrome在查看给定的网页时表现出巨大的滞后.我正在使用DevTools performance 选项卡来尝试找到我假设在我的JavaScript代码中的某个地方的罪魁祸首. 以下屏幕快照显示了使用DevTools录制的配置文件.对于个人资料中显示的某些"任务"，我可以看到任务正在做的事情的详细信息(例如，8700毫秒和9200毫秒之间的任务是GC)，但是对于其他任务，没有任何详细信息，我在屏幕截图中突出了两个.我如何弄清楚这些任务在做什么? 解决方案我遇到了一个类似的问题，在我长期存在的不透明的"任务"中花了几秒钟，而没有在开发工具中进一步的信息. chrome dev向我指向开始了我的痕迹.在另一个选项卡中复制问题后，我回到了Perfetto Trace.我发现这些" ThreadControllerimpl :: Runtask"切片似乎是神秘系统任务的持续时间. 有益地，Perfetto有一个从该任务到另一组"切片"的箭头. 这些都被划

2 2023-05-23 编程技术问答社区 javascript performance google-chrome google-chrome-devtools

Javascript的内存和泄漏问题

我的网站是非常标准的ECOM网站，它不是JS备份的独立应用程序或其他任何内容，它只是一个使用JS用于标准内容的网站，以及一些jQuery插件可以做一些事情. 我正在尝试在我的网站上进行一些JS内存评估.我通过查看Chrome任务管理器并通过堆快照来完成此操作. initailly我的网站在第一个负载上位于35MB(即35,000k)和任务管理器上的40MB之间.如果我同时打开其他网站的几个选项卡，这是任何标签中最大的选项卡. 如果我ref照，它跳至55-60，另一个刷新会看到它跳至65-70MB. 在工作流程中的普通页面上，它在45-65之间波动(有时是75，具体取决于您的工作).单击并完成从页面到页面的工作流程，请看到内存跳到85-100，并在您继续通过网站时增加. 我试图做一些诸如检查之类的事情: dacted节点堆的快照和查看三角洲 Amix的MemoryLeakChecker检查对象的大小我需要更深入的潜水才能寻找循环引用或封闭问题.

0 2023-05-23 编程技术问答社区 javascript performance memory-leaks profiling google-chrome-devtools

减少使用overflow-y: scroll时的滚动干扰。

我有一个2列布局，右手列是可滚动结果列表，最多为200个项目结果(基本上只是一个带有overflow-y: scroll; set的UL) 我发现的是，右手列会在滚动时引起一些jank(在低端硬件上尤其明显). 在Chrome时间轴中，我可以在滚动列时看到一些主要的"更新层树". 有什么办法可以弄清为什么"更新图层树"如此漫长，哪些CSS属性影响速度最大? 当我单击它时 - 只需提供有关它运行多长时间而没有其他信息的信息. 我在每个LI中都有一些CSS，并且表现不佳(例如，过滤器，变换，盒子阴影等) - 如果我一一删除每个SASS文件，它会改善滚动性能(一旦我删除了所有CSS，最终就会删除Jank)，但是显然，很难确定哪些CSS属性无法执行此操作. 我想知道我是否在Chrome时间轴中缺少某些内容，这在这方面可能会有所帮助? 我试图使用will-change css属性将滚动宣传到其他层/力硬件加速度 - 但这并没有太大的不同. 我滚动时也没有执行Ja

0 2023-05-23 编程技术问答社区 html css performance google-chrome google-chrome-devtools

在chrome开发工具TimeLine记录中，Recalculate Layout Paint是什么意思？

在Chrome开发人员工具时间轴记录中，重新计算布局涂料的含义是什么?以及如何通过减少页面重新计算，布局和油漆计数来提高页面性能?可以给出一些建议吗?谢谢解决方案基本上，他们是您的浏览器，弄清楚如何绘制您在页面上进行的更改. 不必担心摆脱它们 - 如果这样做，您的网站将是静态的. 但是... ...如果您想执行对性能有用的事情，这确实与反射和重新粉刷有关，然后将您的更改批量. 假设您在Twitter上找到了一份工作. 您的工作是编写将每个Twitter帖子添加到屏幕的窗口的下一个版本. 如果用户在时间轴中获得250个新推文，并且您将每个推文添加到一个循环中，一个接一个地添加，浏览器将减慢速度，因为每次添加一条，向四处移动以为您添加的东西腾出空间)和重新粉刷(样式的所有受添加影响的一切). 更好的方法是将新推文的列表构建在一起(即:具有现在实际上在页面上的元素)，然后一次将它们全部添加. 这减少了浏览器必须弄清楚一切都需要去的次数. @fabri

0 2023-05-23 编程技术问答社区 performance google-chrome-devtools

使用 "Frames "进行Web检查器分析：当时间线中没有任何东西出现时，找到性能问题的原因

我刚刚看过Google i/o Session 这是我在正在开发的页面上滚动时得到的示例录制: 您可以看到，某些框架中存在巨大的延迟，但在时间轴中没有任何明显的原因(在黄色的"计时器射击"事件之间存在很大的差距).我如何对性能问题进行故障排除以始终提高帧速率? 解决方案您的示例实际上看起来还不错.您的代码运行迅速，浏览器只会以60fps渲染，因此它花费一些时间(最高16ms)等待下一个渲染周期. 这是一个特别令人担忧的快照，从框架视图视图时间线面板. 根据文档: 灰色区域表明活动没有由DevTools仪器进行，Chrome团队努力使该区域保持尽可能小清晰的区域表示显示刷新周期之间的空闲时间，这通常不是问题，尤其是如果该区域带来了60fps线，因为这只是镀铬等待在显示器的Vsync上提供框架酒吧底部消失的小黄色和绿色区域表明，事件处理，绘画和合成的所有速度都很快 - 足够快，可以落在水平线下，指示30fps阈值，并且可能比60fps更快阈值大部

0 2023-05-23 编程技术问答社区 performance google-chrome google-chrome-devtools web-inspector

首页
<
1
2
3
4
5
6
7
8
>
尾页