Debug – Inline JS

DEBUG STUFF:

https://developers.google.com/web/tools/chrome-devtools/sources?utm_source=devtools&utm_campaign=2018Q1
https://developers.google.com/web/tools/chrome-devtools/sources?utm_source=devtools&utm_campaign=2018Q1#workspace
https://developers.google.com/web/tools/chrome-devtools/javascript
https://developers.google.com/web/tools/chrome-devtools/workspaces
https://googlechrome.github.io/devtools-samples/debug-js/get-started

https://wiki.python.org/moin/BeginnersGuide/NonProgrammers
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#Running_a_simple_local_HTTP_server
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#Running_a_simple_local_HTTP_server
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django

https://docs.wp-rocket.me/article/1104-excluding-inline-js-from-combine

Excluding Inline JS from combine

    
 As of WP Rocket 3.1, the option to combine JavaScript files automatically applies also to inline JS and 3rd party scripts. 
 

If this behavior is creating any issue on your site, you can exclude inline JS from the combine option:

Find a unique string in the inline JS you wish to exclude and place that in the Excluded Inline JavaScript field. WP Rocket will search for this string in the inline JS to decide if it should be excluded or not.

If you’re experiencing an issue with too many JS files being created, please read this guide: 

Fix Large Cache Folder Size Caused by Dynamic Inline JS

The instructions below will cover cases where the optimization of Inline JS is causing an error message in your browser console.

How to find inline JS to exclude

We understand it can be difficult to locate which inline JS to exclude, so we’ll walk through one way to do it.

In this example, we refer specifically to using the Chrome browser.

1. Open Developer Tools. You do that either by right-clicking and choosing Inspect Element, or at the top of the window go to: View→Developer→Developer Tools

2. Find the red error message indicator on the right-hand side:

   

3. Click it to open the Console, then click the file referenced in the error notice:

   

4. This takes you directly to the code in the file that is related to the error. Look for the red underline and copy part of that code:

   

5. Open a new browser tab and load the un-cached version of the page. You do that by adding ?nocache to the URL—this will load an un-cached, un-minified version of the page. It is necessary in order to find the original URLs of the files.

   An un-cached URL would look something like:   https://example.com/?nocache or: https://example.com/some-page/?nocache

6. Open Developer Tools in the new browser, then click on the Console:

   

7. Paste the following code in the Console: 

   

    (snippet found
   here)
   
   

8. Press enter to populate the console with all scripts, including inline scripts in red:

   

You can search for the inline script code reference, then choose a unique string to enter into the exclusion area in our settings. 

If the error is related to a 3rd party JS file, follow the directions here to exclude it from combining.