2

Sometimes when I browse some website and check its source using web-inspector (such as Chrome Inspect). I saw the <script> tag or <link> tag with some JS, CSS file, which are shown in the same directory / sub-directory. I can also use their full address to view these files. However, they are not shown in the inspector's Source tab. How do they do that?

For example:

enter image description here

You may see, although the js file under js/ directory is included and can also be viewed in the browser, it's not shown in the source list on the left.

By the way, when I wrote some HTML with JS, they are all listed in the source tab.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Xiaojun Chen
  • 1,222
  • 2
  • 12
  • 21

1 Answers1

0

Well, there may be another way to do this, but I have found that you will hide the source file if you import the script with javascript.

The thought process here, if I'm not too far off base, is that you are adding the script with javascript after the DOM is already being built. Google Developer Tools builds its 'sources' and materials with the DOM when it is loaded, so if you were to load the script asynchronously or pull it in with javascript or jQuery you would make it harder to find in developer tools.

You can find several ways to load external script here:

How do I include a JavaScript file in another JavaScript file?

Community
  • 1
  • 1
TMKAB121
  • 276
  • 2
  • 8