2

我在一个巨大的应用程序中工作,其中大多数东西都使用 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);
      })
 })

屏幕在这里:)

设置断点

指向 jquery.min.js 而不是 app.js 行号

4

1 回答 1

1

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

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

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

希望能帮助到你!

编辑:

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

当开发人员工具打开时,您右键单击的元素将突出显示。

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

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

请参阅下图以供参考:

在此处输入图像描述

于 2015-12-09T10:32:21.070 回答