标签: google-chrome-devtools

我使用 Chrome（Mac 上的版本 72.0.3626.121（官方版本）（64 位））下载http://sites.math.rutgers.edu/~ajl213/CLRS/Ch1.pdf。

响应Content-Length头是111661. PDF 文件大小为111661. 网络分析参考说：

尺寸。由服务器传递的响应标头加上响应正文的组合大小。

所以我认为该size列值应该大于111661。但该size列值为310 B。

我正在这个网站的顶部菜单上工作，http://comfortcare.wpengine.com/。菜单项顶部有太多填充，我无法弄清楚它来自哪里或如何覆盖它。Chrome 开发工具显示绿色填充空间，但实际样式中没有填充。请参阅图片以供参考。

作为参考，我使用 CMS：WordPress，主题：Divi，子主题：自定义。

谢谢。

我正在使用新的 CacheStorage api，并且想要做一些小工作来清理超过特定 ttl（生存时间）的旧缓存条目。

在 Chrome 开发工具 -> 应用程序选项卡中，我看到“缓存时间”列，但无法通过 api 检索该列。

const cache = await caches.open(`my-cache`);
const response = await cache.match(new Request(`https://someurl`))
console(response.cachedTime) <- // doesn't exist

我尝试通过 Date 标头获取它，但这仅适用于非 cors 请求。开发工具以某种方式跟踪所有请求。有没有办法通过 CacheStorage api 动态获取此信息？

// this is not a bullet proof method
// doesn't work for cors or if response doesn't send a Date header
console.log(response.headers.get(`date`));

尝试转储整个响应并检查它，但我没有看到任何有用的东西。

I\xe2\x80\x99m 尝试使用 chrome devtools 来查看网络请求是什么。

但对于某些链接，将创建一个新选项卡用于下载文件，下载文件后该选项卡将立即关闭。

我没有时间检查新选项卡中涉及的网络请求。有没有办法强制在原始窗口中下载，以便我仍然可以看到网络活动？

我正在分析网页性能。网页包含一个“pointermove”事件的处理程序，用于更改 HTMLElement（总共大约 10 个 DOM 后代）的“transform：translate(x,y)”。

在 Chrome 浏览器中，在特定条件下，“pointermove”不会以非常高效的方式处理 - 在“pointermove”期间，会发生延迟和转换属性的“不稳定”变化。

相反，在 Firefox 中，一切都是高性能的（在这些特定条件下）。

在 Chrome 的性能分析中，我在“pointermove”期间检测到很长的“任务”。它说网页 JS 函数（和渲染）大约花费了 1 毫秒，但“系统（自身）”花费了 128 毫秒。

摘要选项卡：

任务

\n
• 总时间：129.76 毫秒
\n
• 自拍时间：128.19 毫秒
\n

自下而上的选项卡：

\n
• 0.6 ms 37.5 % 更新层树
\n
• 0.3 ms 19.9 % 复合层
\n
• 0.2 毫秒 14.8% 命中测试
\n
• 0.2 ms 13.8 % 重新计算样式
\n

没有解释什么任务正在做什么以及它是什么？什么是“系统（自我）”以及为什么花了这么长时间？如何化解这种“乱七八糟”的行为呢？

我期望对“pointermove”事件进行高性能处理，就像在 Firefox 中一样。

在 Chrome 中，“pointermove”是通过一些长时间运行的“系统（自身）任务”来处理的，这会导致糟糕的处理和不稳定的感觉（延迟）。

片段/JSFiddle

code is …

最近我开始使用 Puppeteer 爬行网络。下面是从商城中提取特定产品名称的代码。

const puppeteer = require('puppeteer');\n\n(async () => {\n\n    const width = 1600, height = 1040;\n\n    const option = { headless: false, slowMo: true, args: [`--window-size=${width},${height}`] };\n\n    const browser = await puppeteer.launch(option);\n    const page = await browser.newPage();\n    const vp = {width: width, height: height};\n    await page.setViewport(vp);\n\n    const navigationPromise = page.waitForNavigation();\n\n    await page.goto('https://shopping.naver.com/home/p/index.nhn');\n    await navigationPromise;\n    await page.waitFor(2000);\n\n    const textBoxId = 'co_srh_input';\n    await page.type('.' + textBoxId, '\xec\x96\x91\xeb\xa7\x90', {delay: 100});\n    await page.keyboard.press('Enter');\n\n    await page.waitFor(5000);\n    await page.waitForSelector('div.info > a.tit');\n\n    const stores = …

我目前正在开发一个商店查找器，在我的研究中我发现了这个网站：

https://www.esprit.com/mobile/storefinder

我想知道是否有一种方法可以在开发工具中模拟两根手指的滑动行为以在地图上移动？

我已经尝试过的：

• 双击并拖动
• 按住 Shift 键并单击+拖动

检查此站点时，即使没有设置断点，脚本也始终在调试器中暂停，并且如果暂停未暂停，它会再次自行暂停。

可以做什么？

https://i.stack.imgur.com/J84eU.png

我想让我的 Electron 应用程序切换开发人员工具以响应 F12。

在渲染器页面中，我添加了：

const currentWebContents = require("electron").remote.getCurrentWebContents();
window.addEventListener("keydown", (e: KeyboardEvent) => {
    if (e.keyCode === 123) { // F12
        currentWebContents.toggleDevTools();
    }
});

当我专注于主页时，这会起作用。但是，开发工具打开后，焦点立即转到开发工具，因此F12不再检测到。

我尝试通过在调用后立即向 devtools webcontents 添加侦听器来解决此问题，toggleDevTools()如下所示：

if (currentWebContents.devToolsWebContents) {
    currentWebContents.devToolsWebContents.on("before-input-event", (event: Electron.Event, input: Electron.Input) => {
        if (input.type === "keyDown" && input.key === "F12") {
            currentWebContents.toggleDevTools();
        }
    });
}

然而，打开后currentWebContents.devToolsWebContents就是这样。null我的第一个问题是如何确保它不是null- 有没有办法等到它完全打开？

我通过将if (currentWebContents.devToolsWebContents)代码放入setTimeout(..., 1000);

然而，这样做后，当我before-input-event专注于开发工具时按下按键时，我的处理程序不会被触发。

有人知道这是为什么吗？

在最新的 Chrome 版本 (73.0.3683.86) 中，有一个新功能，它向检查器工具添加了一个工具提示，显示有关悬停元素的信息。（见截图）

现在的问题是是否有人已经发现这个功能是否可以被禁用。