2

I am working in a huge application where most things are hard coded badly using javascript/jquery (especially the heights & widths of lot of components).Most has its element.style property rendering some width and height from somewhere.

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

Is there a way of inspecting that to find that "this width and height" is from "this script file" and "this line"? just like the css source map which points out the partials from which individual styles are applied? Any browser plugins of any sort that can do the tricks as far as script debugging is concerned ?

Any info would be of great help!

[EDIT]

I have tried the options posted below.! Posting a sample replica as well.

<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>

and in app.js

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

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

Screenies here :)

Setting breakpoint

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

Harikrishnan KayKay
  • 293
  • 1
  • 3
  • 13
  • hmm...interesting! something like error object provides but i believe for styles won't be possible. – Jai Dec 09 '15 at 10:31
  • http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ – Jai Dec 09 '15 at 10:36

1 Answers1

1

This may not directly answer your question but I feel it may help you.

In chrome there's a handy "break on attribute change" setting that you can toggle on any element.

Open web inspector, right click any element, choose "Break on" > "Attribute Change".

Hope it helps!

EDIT:

To elaborate further, right click any element in Chrome and choose "Inspect Element".

When the developer tools open, the element you right clicked will be highlighted.

Right click this highlighted element and choose "Break On" > "Attribute Change".

If any JS modifies any attributes on this element, your code will break and reveal the line that updated the attribute in the dev tools for you.

See below image for reference:

enter image description here

James
  • 442
  • 2
  • 13
  • James and Jai! thanks for the quick answer..let me check the option which you have mentioned ...i have checked the html5rocks page before posting this, but dint get much help from there i guess. I am not doing a from the scratch approach, but a sharepoint application with minimal control.. – Harikrishnan KayKay Dec 09 '15 at 10:51
  • @Jai Not that I'm aware - it's just a nice debugging tool in Chrome. It's not going to be better than Sourcemaps. But if you can't get source maps on your project - it's a nice option to use to quickly find JS that's responsible for changes. – James Dec 09 '15 at 11:00
  • @HarikrishnanKayKay This only works for debugging in the browser, specifically Chrome. You'd need to add the breakpoints and then refresh your page if the changes are being made on load. – James Dec 09 '15 at 11:02
  • It dint work out unfortunately. I just tried a demo by just incorporating a blank html with a container div, include jquery , and then setting the container width to a number manually in another file , say app.js as $('.container').width(1566) and wrote another on resize, as $(window).resize(function(){ $('.container').width(2000)}; It broke while resizing, but just pointed out to the jquery.min.js and not the app.js line number which i was expecting to! – Harikrishnan KayKay Dec 09 '15 at 11:12
  • @HarikrishnanKayKay Ah that's unfortunate. Worth a try at least. – James Dec 09 '15 at 11:31
  • Thanks James! ..posted screenshots above. Thanks a lot for the suggestions though. – Harikrishnan KayKay Dec 09 '15 at 11:33