标签: developer-tools

我正在使用一个 Web 应用程序，该应用程序通过 JavaScript 执行一些非常繁重的 DOM 操作，并且我正在广泛使用 Chrome 的开发人员工具来构建页面和功能。问题是有时，当页面在断点或debugger;行，视口中的页面不会变灰，不会收到“在调试器中暂停”消息，它不会以蓝色突出显示我在开发工具中选择的 DOM 元素，也不会重绘或在 DOM 由 Javascript 操作时更新渲染或任何内容。当我取消暂停调试器并且代码完成时，重新渲染会按预期进行，但是当我在调试器中逐行执行代码时，重新渲染不会发生，直到代码完成并且调试器停顿。当我专门尝试调试一些与渲染相关的问题时，这确实是一个问题。这是一个不一致的问题。例如，在我目前正在处理的项目中，有一个 onResize() 方法在初始页面加载时运行，以及（显然）在调整视口大小时运行。如果 Chrome Dev Tools 在 onResize() 的初始运行期间暂停，它会按预期工作，在此过程中的每一步都将更改呈现给页面。但是如果它在该方法的稍后运行期间暂停，在实际调整大小事件期间，我上面描述的问题就会发生，并且在代码完成运行之前我看不到渲染的任何更改。

有没有人知道为什么会发生这种情况，或者我能做些什么？

我在chrome开发工具中启用了工作区.当我保存javascript文件(*.js)时,它具有ANSI编码 - 在它是UTF-8之前.如何在开发人员工具中保存文件时设置该文件保留原始编码？

我按照本教程在Webpack中将React公开为全局.该Expose模块安装和我加入配置webpack.config.js文件模块加载.但是,它无法运行和React Developer Tools仍然无法访问.

这是我的webpack.config.js文件,第一个加载器是expose-react:

var path = require ('path'),
    webpack = require ('webpack'),
    htmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/Main.jsx'
    },
    output : {
        path : PATHS.build,
        filename : 'dressAphrodite.js'
    },
    module : {
        loaders : [
            {
                test : require.resolve ('react'),
                loader : 'expose?React'
            },
            {
                test : /\.css$/,
                loaders : ['style', …

我在 Chrome 开发人员工具中发现了很多关于灰色样式的问题，但没有一个能描述我的奇怪行为。我在 CSS 文件中有简单的类样式。出于某种原因，我可以编辑其中一个，但不能编辑另一个：

CSS文件：

.result {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

.result_image {
    height: 80%;
    overflow: hidden;
}

.result_text {
    font-size: 13.6px;
    margin-left: 5px;
    font-weight: bold;
    height: 20%;
}

HTML：

<div class="result">
    <div class="result_image"><img src="..."></div>
    <div class="result_text">Some text</div>
</div>

正如您在屏幕截图中看到的，我可以编辑 div class="result_image"，但不能编辑 div class="result_text"。我认为这个问题与 Chrome 声称灰色样式来自样式标签有关，但两种样式都在文件“qb1.core.css”中。

在Chrome开发人员工具中，有时某些网站的响应标题中没有“查看源代码”？有什么想法吗？以yahoo.com网站为例。

这个网站很好。

但是雅虎是这样的：

有没有办法检测仅在开发人员工具（检查元素）中所做的样式更改？

如果用户以管理员身份登录，我想允许保存它们。

在::first-line与::first-letter伪元素，因为它们的名称所暗示的，让你的风格的HTML元素的第一个字母和第一道防线。

但是，我找不到任何方法在浏览器的开发人员工具中检查这些样式。其他伪元素和伪类（如::before、::after、:first-child等）可以通过“检查元素”在开发工具中轻松检查，但我找不到检查::first-letter或 的方法::first-line。有没有办法让我失踪，或者目前不可能？

在 Mozilla Firefox 中，如何检查哪些文件来自浏览器缓存，哪些文件来自服务器？

打开 Chrome 开发人员工具时，控制台通常位于任何打开的选项卡（如元素、源等）下方。但是，我现在在那里看不到它。

我怎样才能把它又放回去呢？

我看过Firefox的一些自动填充功能.但它们的设计并非考虑到开发人员的需求.一般互联网用户需要一个工具来填写许多不同的表格,每个表格都有不变的值.开发人员需要完全相反,当您想要测试应用程序的一部分时,您需要使用不同(但有效且合理)的数据多次填充单个(或几个)表单.

那么,这样的事情存在吗？根据类名(电子邮件,密码,地址,网址,...)填写表单输入的自动填充？

我强烈地觉得,如果它不存在,有人应该卷起袖子做一个!如果其他人想要合作,我会为我的分享.但是现在,如果它存在,我迫切需要一个