Question

我正在一个巨大的应用程序中工作，其中大多数东西使用javascript / jquery严格编码（特别是许多组件的高度和宽度）.Most的element.style属性从某处渲染了一些宽度和高度。 / p>

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

Answer 1

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

在Chrome中，有一个方便的＆＃34;中断属性变化＆＃34;设置您可以切换任何元素。

打开Web检查器，右键单击任何元素，选择＆＃34; Break on＆＃34; ＆GT; ＆＃34;属性变更＆＃34;。

希望它有所帮助！

修改

要进一步详细说明，请右键点击Chrome中的任意元素，然后选择＆＃34;检查元素＆＃34;。

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

右键单击此突出显示的元素，然后选择＆＃34; Break On＆＃34; ＆GT; ＆＃34;属性变更＆＃34;。

如果任何JS修改了这个元素的任何属性，你的代码就会破坏并显示在dev工具中为你更新属性的行。

见下图供参考：

如何找到element.style（）动态获取其值的行或脚本文件

1 个答案: