Where Did Webpack Put My Source Code?

A friend of mine asked me an interesting question Friday that I thought I should share. Where did Webpack put my source code? When we build Angular 2 apps using the Angular CLI, Webpack comes pre-configured. So, we don’t exactly know where it is putting things.

If you are developing in Chrome and open the developer tools, the source tab points to the compiled JavaScript, not the TypeScript we wrote. What gives? Well, fear not my friends. Your TypeScript code is still present and available for you to use. Finding it is easy.

  1. Open your app in Chrome’s debugger
  2. Click on the source tab
  3. Click the disclosure arrow next to the word “Top”, if it is not already opened
  4. Click the arrow next to “webpack://” (pic #1)
  5. Click the arrow next to the path to you app
    (For me it is “Users/troymiles/Documents/Tutorials/quizzer”)
  6. Click on the “.ts” file you’d like to debug, break points can be set in it (pic #2)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s