标签: google-chrome-devtools

Safari/Chrome开发人员工具表明CSS规则被其他内容覆盖,如图所示.

有时我发现自己处于一种情况,我无法从CSS文件中找出导致忽略此规则的原因.但是,Safari本身必须知道它正在通过它.

有没有办法知道什么压倒了这样的规则？

我知道您可以单击垂直省略号按钮(⋮),然后选择停靠在底部,右侧或分离.但有谁知道如何停靠在左边？

目前我必须分离然后手动调整大小和调整,这很烦人.

编辑:我只是将这个问题保持开放,直到有人说服谷歌添加左对接,或有人找出黑客/发现或建立扩展以使其工作.

编辑2:问题解决了.谷歌刚刚在最新的标准Chrome版本中添加了此功能(第58版)

我有一个用webpack编译的ES6模块.要调试它,我必须手动将某些对象附加到window我,以便我可以通过Chrome/Safari中的调试工具引用它们:

export class Dialog {
  ...
}

window.debugdialog = Dialog;

这非常麻烦,肯定不是最好的方法.有没有办法在不必修改源代码的情况下引用模块？

是的我知道断点,我使用它们.但有时我想加载所有代码并通过内联JavaScript控制它来调整UI.

在Chrome的控制台中,这些天你可以写出相当不错的东西.查看此链接.我也做了一个截图:

正如您在屏幕截图中看到的那样,文件名/行号(VM298:4)写在右侧.是否有可能删除它,因为在我的情况下,这是一个非常长的名称,或多或少打破我试图在我的控制台中产生的效果？

我已经在我的爱好项目中添加了一些像Babel和闭包编译器这样的东西,但却发现Chrome没有在我的映射文件中点击断点.

这是一个重现问题的片段:

function test(){console.log("Break me")}test();
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxTQUFBLElBQUEsR0FBQTtBQUNBLFlBQUEsR0FBQSxDQUFBLFVBQUE7QUFDQTs7QUFFQSIsImZpbGUiOiJtYWluLm1pbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIHRlc3QoKSB7XHJcbiAgICBjb25zb2xlLmxvZygnQnJlYWsgbWUnKTtcclxufVxyXG5cclxudGVzdCgpOyJdfQ==

Chrome会选择映射文件,但这里不会出现断点,
这会破坏添加源图的目的......

如何在地图上点击断点？

^{Chrome版本50.0.2661.94米,使用外部地图文件}

编辑:
当我通过Babel/closure管道代码时,我的源代码似乎有问题...
(所以请忽略该代码段​​,源代码图似乎已损坏)

gulpfile.js

.pipe(sourcemaps.init())
.pipe(concat("main.min.js"))
.pipe(babel({ presets: ["es2015"] }))
.pipe(closure({ compilation_level: "SIMPLE_OPTIMIZATIONS" }))
.pipe(sourcemaps.write("."))

使用gulp-sourcemaps,gulp-babel,gulp-closure-compiler-service

我的问题是Chrome DevTools,特别是我对Timeline标签有疑问.因此,我已多次阅读,我的浏览器必须以60fps的速度渲染我的像素.有时虽然它有一些繁重的JS执行并阻止60fps发生.此外,如果我有一些CSS和JS导致重新计算和重新绘制DOM树(部分或完整树),一帧也可能需要超过16毫秒.这是我们的应用程序中这么长的帧的图片:

好的,在这里我可以清楚地看到,两个请求需要花费很多时间(192ms + 14ms),浏览器无法绘制60fps并且它甚至不能靠近那里.

虽然这是另一张图片:

所以现在好多了.现在它是~42fps.但现在我无法理解为什么..

我有几个"更新图层树"和"绘画"场合.一些鼠标事件,但它们都在这里<= 1ms.

在此框架中有12个这样的"事件".其中10个甚至不到0.30ms,所以如果我总结它们肯定会少于16ms(3.57,如果我算的正确),但Chrome说这个帧是23.9ms.

为什么Timeline说我这里有垃圾？我该怎么做才能摆脱它,以及如何知道瓶颈在哪里？

我在这里有点困惑,因为我在审查时间表时肯定会遗漏一些东西..所以,请给我一些详细的解释或一些关于如何摆脱这些"帆船"以及如何检测它们的详细教程.虽然我已经阅读了几篇文章并且几乎完成了Udemy关于性能的课程,但我仍然感到很困惑.

谢谢

我想在我的应用中使用chrome自定义标签.我发现如何将数据从url加载到选项卡中,但我没有找到,如何使用html-tags从字符串值加载数据.如何从webview示例中进行类比功能:

webViewContent.loadDataWithBaseURL(null, htmlText, "text/html", "UTF-8", null);

在chrome自定义标签中？

它在第一次加载时很好,但是一旦刷新,尽管它可以从控制台获得,但它在应用程序选项卡中不可见.

我该怎么办？

我的版本是57.0.2987.133

我正在开发一个以angular-cli为基础的Angular项目.我在package.json中导入了一个库,我想在Chrome开发工具调试器中逐步浏览库.如何在开发工具中显示库原始打字稿源？我假设这与一些webpack配置有关？

我当前在Debian Strecht上使用版本72.0.3626.119。我注意到，自从几天（也许一两周）以来，我想念您在网络窗口中右键单击XHR请求时所获得的Replay XHR菜单项，如此处所述。

我也一直在用各种结果混合搜索google，我从2016年开始发现了这样的问题，OP似乎也有类似的问题，但是由于我的xhr请求没有上传文件，因此这对我也不适用。在devtool论坛上，我发现什么都无济于事。

所以问题是，此功能是否也适用于其他所有人？还是只是我？我已经通过了devtools设置，但是没有找到任何可以帮助我解决此问题的选项。