Search code examples
wordpressdeveloper-tools

Catch exact script & filename & string in developer tools on scroll

I'm using Divi theme for my Wordpress website. On scroll down for some px it adds class "et_fixed_header" to element and changes inline style="margin: -300px".

I see changes in DOM while scrolling the page, emulating iPhone6, I want to catch script which is trigerring on scroll event.

How do I do it in Developes Tools in Chrome.

I'm interested in methodic not particular solution.

Thank you very much for your Answers.

Chrome Version 50.0.2661.75 m

Here is screenshot of my DevTools http://prntscr.com/au8mah

Trying to understand UI.

Solution

  • In chrome dev tools, you can find the Divi Js in Sources/top/web-site-url/wp-content/themes/Divi/js/custom.js

    Search in this file for et-fixed-header and add a breakpoint. Their is sevral occurances of et-fixed-header. In my setting, the one on line 663 is the right one.

    enter image description here

    About the methodology to find it

    In chrome dev tools, one the left part, you have sources. This is all the content loaded by the web page. That mean, all the JS of your page must be their.

    With some idea of the file location

    If you have an idea where is supposed to be the JS you are looking for (plugin/theme/file):

    • Open file(s)
    • Define a keyword related to the event ( ex: et-fixed-header)
    • Use finding functionality (ctrl+f) to find the keyword
    • If the keyword is find, put a breakpoint
    • Watch if the breakpoint match the event you except
    • Repeat this for each supposed file / occurence of keyword until you find what you except

    Without any idea

    It could be more difficult. Some possibility:

    • May be their is not a lot of a loaded file in the page. So, as describe before, search in each file
    • (!) You could try to download the page offline and use any search tools that allow you to find content in files
    • In Chrome Dev Tools / Sources, you have a part call Event Listener Breakpoints. In it, you could set breakpoint for event. If you know what event start the script or what event the script trigger, it could be use to find what you are looking for.

    Tips

    You have a very nice Pretty Print functionnality in Chrome Dev Tools for minified JS.

    Link for the documentation about that