天道酬勤,学无止境

google-chrome-devtools

Chrome DevTools 错误:“无法保存到临时变量。”(Chrome DevTools error: “Failed to save to temp variable.”)

问题 我正在使用 Node Monkey 来调试我的 NodeJS 应用程序。 当我在 Chrome 控制台中单击“存储为全局变量”时,经常会出现“无法保存到临时变量”。 console.log({why:'dont', you:'work?'}) 它也发生在这个 jsfiddle 1)我做错了什么吗? 2)为什么会这样? Chrome:50.0.2661.102(64 位)OSX El Capitan 10.11.4 回答1 我可以看到 Store As Global Variable 不起作用的两个原因: 1. 选择了错误的控制台上下文 这可以说是 Chrome 的错误,但如果控制台设置为与记录对象的代码相同的上下文,则您只能将对象存储为全局对象。 实际上,这意味着您可能需要选择正确的 IFrame 或 Web Worker。 例如,在 jsFiddle 上: 在正常的 jsFiddle 编辑器页面上下文中,我收到一个错误。 但如果我将上下文更改为小提琴本身的内容,它会起作用: 2. 垃圾收集 为了让 Chrome 为您提供对对象的引用,该对象仍必须在内存中。 如果不是这种情况,它只能抛出错误。 但是,我很确定在控制台中显示会强制 V8 保留对该值的引用。 回答2 您需要在控制台本身中创建对象,因为对对象的引用需要由 Chrome 维护。 只需将以下内容放入控制台: {why

2021-06-24 09:55:32    分类:技术分享    node.js   google-chrome   google-chrome-devtools

延迟长时间运行的计时器任务以提高滚动平滑度(Deferred long-running timer task(s) to improve scrolling smoothness)

问题 我正在检查我的页面,我收到了这个警告: 延迟长时间运行的计时器任务以提高滚动平滑度。 见 crbug.com/574343 我也看过: Blink 推迟了一项任务,以使滚动更流畅。 为避免这种情况,您的计时器任务的运行时间应少于 50 毫秒。 请参阅 https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail 和 https://crbug.com/574343#c40 了解更多信息。 这是什么? 回答1 当 Blink(Chrome 的渲染引擎)决定延迟执行计时器(例如传递给requestAnimationFrame 、 setTimeout或setInterval的函数)时,就会发生这种情况,因为这些函数通常需要 > 50 毫秒才能执行并且存在用户触摸输入。 这样做是为了优先处理用户输入(如滚动和点击)高于网站正在执行的操作。 如果您遇到过此消息,那么您的用户很可能会得到类似的行为。 以下是重现此场景的方法: 有通过计时器触发的长时间运行的 javascript 在移动设备上(或使用 DevTools 设备模式模拟它) 有触摸输入,在屏幕上用手指向下滚动是最可靠的。 点击或翻页也可能触发它,但它不太可能且难以重现。 devtools 的实验性CPU

2021-06-24 08:14:41    分类:技术分享    javascript   html   google-chrome   google-chrome-devtools

Three.js: how to correctly dispose a scene in memory

I am having many problems to get rid of memory leaks using three.js in a reactive application. Investigating the problem, I found that I am not even able to correctly dispose a scene (without rendering). Let me show you: https://plnkr.co/edit/Z0sXOnXYc2XOV4t9tETv In the above example, initially 3 THREE objects are instantiated (as you can see there is no rendering going on, just instantiating the objects): scene camera renderer Using the chrome devtools let’s take a memory snapshot just after loading the page: Now let’s click on the “ADD 1000 MESHES” button, which as you can guess simply

2021-06-24 07:34:16    分类:问答    javascript   memory-leaks   three.js   garbage-collection   google-chrome-devtools

Chrome Inspect Device not showing android app

I am trying to debug this app using chrome://inspect - Devices, but I am not able to see my app in the debug app list. I can see the device name and only Chrome app under it, but not my app. Settings that I have applied Enable USB Debugging (Android Device) Discover USD Devices (Chrome Dev Tools) Select Debug app - App Name Use USB for - File Transfer Added android:debuggable="true" in Manifest file I have also tried using different USB cables, different android device, but no luck.

2021-06-24 07:18:45    分类:问答    android   debugging   google-chrome-devtools   usb-debugging

如何在响应模式下显示鼠标指针?(How to show mouse pointer in responsive mode?)

问题 我曾经能够取消选中Emulation/Sensors面板中的Emulate touch screen复选框,以便在使用响应模式时可以看到鼠标指针。 这个面板现在不见了,新的传感器面板没有这个设置。 这使得无法使用响应模式,因为我没有指针,也无法控制我触摸/点击的位置(谁设计了这个功能?!)。 在较新的 Chrome 中使用响应模式时,如何看到指针/鼠标? 回答1 显然,在使用响应模式时,您应该看到一个圆圈作为您的鼠标。 我从未见过,即使使用了几台不同的机器,所以该功能似乎已损坏。 针对 v72 更新: 年长的 然而,在发布这个问题之后,我终于偶然发现了一个解决方案。 在版本 50 中,现在的解决方案是在响应模式下按右侧的三个点⋮ ,然后选择Show device type 。 这为您提供了尺寸等旁边的新下拉列表,其中可以选择Desktop或Mobile (no touch)以在使用响应模式时使用普通鼠标指针(禁用触摸仿真)。 回答2 转到:控制面板 > 英特尔图形设置 > 显示 > 常规设置。 然后将 Quantization Range 更改为Full Range 。 从这里解决。 感谢@Funktr0n。 回答3 在 Chrome Version 73.0.3683.103和 macOS Mojave 中,您必须在开发模式下的浏览器窗口菜单中切换add device

2021-06-24 03:32:26    分类:技术分享    google-chrome-devtools

Share in-memory objects in Chrome extension content scripts?

I am new to both JavaScript and Chrome development, and am trying to create an extension that injects content/CSS in certain web pages. Simple enough, but the catch is that to do so it requires looking through a significant amount of data in local storage. From what I've read so far, the correct way to do this would be either: Reading the required data (JSON serialized) from storage directly from the content script every time the page is visited, or Maintaining the state in the extension background page and transferring the required data (also JSON serialized) to the content script environment

2021-06-23 23:31:13    分类:问答    javascript   google-chrome   google-chrome-extension   google-chrome-devtools

“抽屉”面板在刷新时不断显示(“Drawer” panel keeps showing up on refresh)

问题 我刚刚将我的 chrome 版本升级到 49.0.2623.87,现在当我在打开开发工具的情况下刷新(F5)我的页面时,包含控制台的“抽屉”面板不断显示。 显然,“模拟器”面板中有一个修复程序,但似乎此修复程序使用的复选框不再存在。 有没有人遇到同样的问题并设法修复它? 回答1 知道了。 随着开发工具打开点击 F1 打开设置。 取消选中“启用 CSS 源映射”关闭设置框。 这对我的控制台一直打开的问题有效 - 我刚刚重新测试,这是您需要更改的唯一选项。 我相信它会解决您的问题,并且与我的问题密切相关。

2021-06-23 22:47:20    分类:技术分享    google-chrome-devtools

权威 http 标头 - 在 chrome 开发工具中(authority http header - in chrome dev tools)

问题 chrome 开发工具 - 显示一些带有前导: http 标头(不知道为什么它对某些而不是其他)。 其中之一是 http 标头authority ,显示为: authority:api.somedomain.com 但是,这列在 Wikipedia 上的 http 标头列表中。 这是一个新的 HTTP2 标头还是可以在标头中定义任何新的请求字段 - 或者这些是固定的吗? 回答1 这些是新的 HTTP/2 中定义的Pseudo-Header Fields 。 HTTP/1.x 使用消息start-line来表示目标 URI、请求方法、响应代码等。所有 HTTP 消息要么是从客户端到服务器的请求,要么是从服务器到客户端的响应。 这两种类型的区别在于它们的start-line ,它是request-line ,或响应的status-line 。 request-line = method SP request-target SP HTTP-version CRLF status-line = HTTP-version SP status-code SP reason-phrase CRLF 您可以在 RFC7230 第 3.1 节中阅读更多内容 但为此,HTTP/2 使用以“:”字符(ASCII 0x3a)开头的特殊伪标头字段。 这些伪头是严格定义的。 有请求伪头域和响应伪头域。

2021-06-23 21:24:52    分类:技术分享    http   google-chrome-devtools

如何在 Chrome 控制台打开时显示屏幕大小?(How do I get the screen size to show when Chrome console is open?)

问题 我刚刚升级到最新版本的 Chrome (49.0.2623.87)。 我注意到缺少一个小功能。 如果我在控制台打开的情况下检查页面并调整浏览器的大小,Chrome 的右上角曾经有一个小指示器,指示浏览器视口的大小。 现在已经没有了。 我如何取回它? 回答1 已知错误,已修复:https://bugs.chromium.org/p/chromium/issues/detail?id=582421 它应该降落在 M50。 如果您更早需要它,那么它目前在 Canary 中(与标准 Chrome 并排),或者您可以使用 Chrome 的开发频道。 回答2 临时解决方案: 1- 右键单击​​开发人员工具(元素)中的html元素 2- 在网站窗口内点击 回答3 function winSize() { console.log(` Inner Width: ${this.innerWidth} Inner Height: ${this.innerHeight} Outer Width: ${this.outerWidth} Outer Height: ${this.outerHeight} `);} winSize(); 任何时候你想检查窗口大小,运行winSize() 。 请注意,您可以使用控制台中的向上/向下箭头键滚动浏览您使用的命令。 回答4 在 50 版本中修复了错误

2021-06-23 20:38:09    分类:技术分享    google-chrome   google-chrome-devtools

如何在不滚动的情况下触发滚动事件(How to trigger an on scroll event without scrolling)

问题 我的问题是,我如何触发(模拟或其他东西)滚动事件。 在我的特殊情况下,我不想通过缩小所有守恒来加载 LinkedIn 中的所有守恒,因为太多了! 我不需要 PHP 或 Javascript 解决方案。 简单地在 chrome 上使用开发工具就足以实现我的目标。 回答1 或者,您可以手动触发真正的scroll事件,如下所示: el.dispatchEvent(new CustomEvent('scroll')) 与+1和-1像素的双重滚动相比,这感觉更少(并且性能更高)...... 这应该运行任何一段侦听scroll事件的代码。 编辑:要支持IE11或其他旧版浏览器,请考虑使用CustomEvent mdn-polyfills例如mdn-polyfills 回答2 这不适用于 Chrome 或 Firefox window.scrollTo(window.scrollX, window.scrollY); 这适用于: window.scrollTo(window.scrollX, window.scrollY - 1); window.scrollTo(window.scrollX, window.scrollY + 1); 不花哨,但有效。 请注意,只有第一行代码是必需的,另一行代码只是将滚动返回到原来的位置。 我不得不在按钮上触发滚动功能。 如果你碰巧点了两次按钮

2021-06-23 20:11:25    分类:技术分享    javascript   jquery   google-chrome-devtools   lazy-loading   linkedin