engineering

Week 1 in Javascript: Some helpful hints

General Javascript Tools:

Do your development in chrome, because it has rockin developer tools.  

Exhibit A: Debugger: sources -> localhost:port -> js -> click the line of the file you want! Warning, a lot of production sites minify their js, which makes it hard / impossible to actually add the debugger on prod.  Works great for local debugging though.

Screen Shot 2016-02-09 at 4.26.36 PM

Exhibit B: What’s the server sending?  Network tab!  The network tab has a record of conversations between the app and the server.  Below you can see the data in the chart being returned from the server call.

Screen Shot 2016-02-09 at 4.27.46 PM.png

Other things that have helped me:

For AngularJS users: Batarang, a chrome app, allows you to select a section of your document and inspect the scope.  $scope.variable in Angular saves variable information so that it can be accessed in different places.  It’s a little like self.variable in python in that they need to be set up, but can then be accessed by anything with access to the scope (or the object).

Screen Shot 2016-02-09 at 4.28.22 PM.png

Hide your folders with prepared assets (eg from grunt or gulp):  This is a Sublime Text only tip – but you can hide these folders!  Super helpful if, like me, you can’t seem to stop editing the wrong file

Screen Shot 2016-02-09 at 4.28.59 PM.png

This plus some help from some killer teammates has been helping me ramp up on the javascript side of things.  Got any other killer tips? Let me know in the comments!

Tags:

Discussion

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