CODEWITHSUNDEEP
requirejs
Michael Pell
Michael Pell

Reputation: 1476

How to inspect JS files loaded with RequireJS using FF or Chrome?

The Goal

I am trying to dissect a client-side application that uses RequireJS to load its source.

The Problem

As expected, the app loads up one main JS file that require()s and define()s other modules. The main JS file is visible in Chrome's Dev Tools --> Resources. All of the subsequently loaded modules are not.

How can I view JS files loaded as RequireJS modules in a way similar to how I would view JS files loaded by script tags?

Upvotes: 2

Views: 1284

Answers (3)

sifr_dot_in
sifr_dot_in

Reputation: 3593

i had the same issue when i loaded a .js file with

$("#element").load("thisIsMyJsFile.js");

and I wanted to debug "thisIsMyJsFile.js" in "sources" in chrome.
add this line in the "thisIsMyJsFile.js" file:

//# sourceURL=browsertools://thisIsMyJsFile.js

change "thisIsMyJsFile.js" with your file name.
and
it will be shown in the source when you inspect element.

Upvotes: 0

Tanmay
Tanmay

Reputation: 746

I am afraid you will be able to see any JS files as it seems that the client-side application which you are trying to debug is an optimize version of RequireJS.

RequireJS optimizer is a tool which combines all the define() and require() scripts into single file this helps to reduce server side call or for that matter there is only one call to server side. Think of it just like minified version of most of the standard libraries

Upvotes: 1

Andreas Köberle
Andreas Köberle

Reputation: 110932

Take look at the Sources tab, there will you find all the loaded files. Maybe you have to click the small show navigator icon in the upper left corner of the source window.

Upvotes: 1

Related Questions