How do I know where a style attribute is added to Chrome dev tools?

Question

I am currently working on a website where various scripts modify the DOM (both using click / hover events and page loading), changing the height / width of elements, etc., and I'm trying to figure out which scripts which elements affect. For example, it is height: 9pxadded to the element <span>below, and I need to know what the script is doing (currently using Chrome Dev Tools, although if another browser can perform this task better, I am open):

<span data-id="m_left_fitting_finish_filter" class="sidebar__filterBlock-title" style="height: 9px;">   

Tried to select Break on> Attributes modificationsand reload the page, although it didn't seem to do anything - does it only work for class / id changes?

Answer 1

Open console, select the tab Elements, in the right pane, select the tab Styles. Must list the files uploaded css. You can return to the left panel, select the tab Sources; then select a script from the left pane, select the entire script, if necessary, right-click, select Add to Watch. In addition, you can copy the entire script by selecting scriptin the left pane, right-clicking, select Add Folder to Workspace, rate in a text editor for the property heightto be set.

Answer 2

, , (https://www.youtube.com/watch?v=vh-lZR2z_Lw&feature=youtu.be), :

• "".
• / .
• ( , , ..).
• , - , .. ( , jQuery , Google , :)

!