如何找到 element.style() 动态获取其值的行或脚本文件答案

【问题标题】：How do i find the line or the script file from which the element.style() gets its values dynamically如何找到 element.style() 动态获取其值的行或脚本文件
【发布时间】：2016-03-14 13:55:01
【问题描述】：

我在一个巨大的应用程序中工作，其中大多数东西都使用 javascript/jquery 硬编码（尤其是许多组件的高度和宽度）。大多数都有它的 element.style 属性从某个地方渲染一些宽度和高度。

element.style {
    width: 1566px;
    height: 425px;
}

有没有办法检查“这个宽度和高度”来自“这个脚本文件”和“这一行”？就像 css 源映射指出应用各个样式的部分一样？就脚本调试而言，任何类型的浏览器插件都可以解决问题吗？

任何信息都会有很大帮助！

[编辑]

我已经尝试了下面发布的选项。！同时发布示例副本。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="reset.css" />  
    <style type="text/css">
      .bg{
          background-color:blue;
       }    
       body,html{
          height:100%;
       }
       body{
         min-height:100%;
       }
    </style>

</head>
<body class="bg">   
</body>

在 app.js 中

 $(document).ready(function(){
     $(".bg").width(1566);

     $(window).resize(function(){
         $(".bg").width(1800);
      })
 })

这里的屏幕:)

Setting breakpoint

Pointing to jquery.min.js instead of app.js line number

【问题讨论】：

嗯...有趣！像错误对象提供的东西，但我相信样式是不可能的。
html5rocks.com/en/tutorials/developertools/sourcemaps

标签： javascript jquery styles hardcode

【解决方案1】：

这可能无法直接回答您的问题，但我觉得它可能会对您有所帮助。

在 chrome 中，有一个方便的“属性更改中断”设置，您可以在任何元素上进行切换。

打开网页检查器，右键单击任何元素，选择“中断”>“属性更改”。

希望对你有帮助！

编辑：

要进一步详细说明，请右键单击 Chrome 中的任何元素并选择“检查元素”。

当开发者工具打开时，你右键点击的元素会被高亮显示。

右键单击此突出显示的元素并选择“中断”>“属性更改”。

如果任何 JS 修改了此元素的任何属性，您的代码将中断并显示为您在开发工具中更新属性的行。

参考下图：

【讨论】：

詹姆斯和杰！感谢您的快速回答..让我检查您提到的选项...我在发布此之前检查了 html5rocks 页面，但我猜想从那里得到很多帮助。我不是从头开始的方法，而是一个控制最少的共享点应用程序..
@Jai 我不知道 - 它只是 Chrome 中一个不错的调试工具。它不会比 Sourcemaps 更好。但是，如果您无法在项目中获取源映射 - 这是一个不错的选择，可用于快速找到负责更改的 JS。
@HarikrishnanKayKay 这仅适用于在浏览器中调试，特别是 Chrome。如果在加载时进行更改，您需要添加断点，然后刷新页面。
不幸的是它没有成功。我刚刚尝试了一个演示，只需将一个空白 html 与一个容器 div 合并，包括 jquery ，然后在另一个文件中手动将容器宽度设置为一个数字，比如 app.js 为 $('.container').width(1566)并在调整大小上写了另一个，如 $(window).resize(function(){ $('.container').width(2000)}; 它在调整大小时坏了，但只是指出 jquery.min.js 而不是我期望的 app.js 行号！
@HarikrishnanKayKay 啊，真不幸。至少值得一试。