标签: google-chrome-devtools

我可以通过编程方式从Google Chrome扩展程序中打开devtools吗?

我有一个镀铬扩展,它挂钩到devtools.理想情况下,我想要一个徽章,当点击它时,会打开我创建的新选项卡上的devtools.有没有办法从后台页面这样做?

javascript google-chrome-extension google-chrome-devtools

76
推荐指数
4
解决办法
3万
查看次数

Chrome开发者工具:什么是Snippets支持?

从版本19开始,Chrome的Web Inspector具有称为"片段支持"的实验性功能.以下是如何激活它:

  1. 打开chrome:flags,启用"Developer Tools实验",重启.

  2. 打开Web Inspector(开发人员工具),点击右下角的设置齿轮图标,启用"Snippets support",重新启动.

    启用代码段支持

  3. 打开Scripts面板,单击左侧的"导航树"图标,找到一个空的Snippets选项卡.

    片段标签

我的问题是:我可以用它做什么?我怎样才能用片段填充这个?

javascript web-inspector google-chrome-devtools

76
推荐指数
4
解决办法
2万
查看次数

Chrome开发者工具不再显示所有JavaScript文件

并非所有JavaScript文件都在Chorme Developer工具中可见.

谷歌浏览器是最新的.版本44.0.2403.130 m应用程序的调试版本.脚本在脑海中.

<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/jquery.validate.js"></script>

...

<script src="/Client/Statics/GuiContainers.js"></script>
<script src="/Client/ClientDAL.js"></script>
<script src="/Client/ClientLayoutUpdater.js"></script>
<script src="/Client/ClientRenderer.js"></script>
<script src="/Client/ControllerLocator.js"></script>
Run Code Online (Sandbox Code Playgroud)

脚本的第一部分在localhost/Scripts/*路径的Sources菜单下的Chrome Developer Tools中可见.自昨天以来,脚本的第二部分不可见.开发人员工具有什么问题?

JavaScript控制台中没有错误.我可以在网络选项卡中看到成功的JavaScript文件请求.所有JavaScript都已加载.应用程序正常.

开发人员工具有什么问题?有没有人有想法?

如果我将localhost"文件夹"添加到工作区,则一切都可见,甚至是服务器端源文件.

javascript debugging google-chrome google-chrome-devtools

76
推荐指数
7
解决办法
7万
查看次数

当Chrome Dev Tools显示计算属性为灰色时,这意味着什么

请注意,不是 "样式"面板(我知道在该上下文中灰色表示的内容 - 未应用),而是下一个面板"计算属性"面板.

当Computed属性显示为灰色时,这意味着什么?

例:

在此输入图像描述

css google-chrome google-chrome-devtools

76
推荐指数
1
解决办法
1万
查看次数

添加 Javascript 库时,Chrome 抱怨缺少源映射,为什么?

我的代码

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> 
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script> 
 </head>

  <body>
    <img id='cat' src='./pose/images/aa_085.jpg'/>
  </body>
  <!-- Place your code in the script tag below. You can also use an external .js file -->
  <script>
    var flipHorizontal = false;

    var imageElement = document.getElementById('cat');

    posenet.load().then(function(net) {
      const pose = net.estimateSinglePose(imageElement, {
        flipHorizontal: true
      });
      return pose;
    }).then(function(pose){
      console.log(pose);
    })
  </script> 
</html>
Run Code Online (Sandbox Code Playgroud)

很少使用HTML和JS,几乎忘记了最基本的东西,有没有好心人指出我的傻瓜?附上错误信息。

DevTools 无法加载 SourceMap:无法加载https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map 的内容:HTTP 错误:状态码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE

google-chrome-devtools

75
推荐指数
7
解决办法
31万
查看次数

Google Chrome开发工具检查未显示的元素样式

几个星期前开始....在我们的一些网站上,但不是全部,在检查一个元素时,样式选项卡只显示"样式框",但不是与css相关的实际样式?-再次,这是只有在一些网站-怪异

它应该看起来像这样(右侧显示与css相关的样式)

正确的样式选项卡

但是 ......相反,在我们的一些网站上,这几周刚刚开始看起来像这样......在样式标签中没有显示css:

错误的样式标签

注意:它已经工作了2年 - 页面看起来很好,所有样式都应用于DOM,但在检查元素时不会显示在样式选项卡中.

有任何想法吗??

google-chrome-devtools

74
推荐指数
4
解决办法
4万
查看次数

每次打开Chrome DevTools时,如何默认隐藏"控制台抽屉"?

当我有DevTools开放,有一个小按钮切换Hide Drawer.Show Console..除了名字不一致之外,"抽屉"对我来说非常烦人,因为它占用了大量的为devtools分配的小屏幕空间(我是底部停靠).如何让这个"抽屉"永久关闭?或者,如果我不能这样做,我至少可以保持它的高度尽可能低吗?(每次打开它都会返回默认高度)

javascript console google-chrome google-chrome-devtools

73
推荐指数
7
解决办法
2万
查看次数

Chrome中的Javascript执行跟踪 - 如何实现?

我在网站上加载了约100-200个javascript函数.我想确定当我在Google Chrome中点击一个或另一个项目时执行的javascript功能.如何使用Chrome Web开发人员工具执行此操作?谢谢!

javascript debugging google-chrome google-chrome-devtools

71
推荐指数
3
解决办法
7万
查看次数

Google Chrome的两种元素风格之间的差异

我使用谷歌Chrome开发人员工具,我不断检查一个元素来回反复来找出可能导致特定样式问题的因素.

比较元素1和元素2之间的风格差异会很好.

这可以通过Chrome目前或通过一些解决方法来完成吗?有没有可以做我想要的工具?

样式差异的当前示例是我在垂直对齐中出现较高H4A位置旁边的内联A.我不会在这个问题上寻求解决方案,因为我会解决它.

css styles google-chrome google-chrome-extension google-chrome-devtools

71
推荐指数
1
解决办法
9629
查看次数

在Chrome DevTools中停用源地图

有没有一种快速方法可以从Chrome DevTools中显示的jsx代码切换到原始ES5并再次返回?

javascript google-chrome google-chrome-devtools source-maps

70
推荐指数
1
解决办法
3万
查看次数