Writing better HTML5 websites and
debugging them
By Peter Messenger
Senior Developer – Triple Point Technology
http://www.petermessenger.com
Email : stonecourier@gmail.com
Twitter : stonecourier
Linked In : http://www.linkedin.com/in/petermessenger
Summary
Writing HTML5 Websites generally requires a lot
of javascript
So will talk about
• Writing Better Code
• Monitoring Errors
• Testing
• Debugging in Chrome
Write Better Code
• Use typescript to write your client code code
– http://www.typescriptlang.org/
– TypeScript lets you write JavaScript the way you
really want to.
TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
– Classes, inheritance, modules, typed variables
– Compile time checking
Write Better Code
• Use tools like JSHint/JSHint
– Rules for writing better and more supportable
– Rules can be turned on/off as required
• Web Essentials for Visual Studio
– http://vswebessentials.com/
– Tools to make programming easier
– Includes typescript, JSHint
– Source Maps
Write Better Code
• Use MVVM framework or something similar
– http://knockoutjs.com/
– Enables testable javascript and easy binding to
html
– https://angularjs.org/
– Much more popular, complete toolset, lots of user
addons
Monitor Errors
• Javascript
window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
+ ' Column: ' + column + ' StackTrace: ' + errorObj);
}
• C#, Global.asx
void Application_Error(object sender, EventArgs e)
{
………
}
• Other Framework
Monitor Errors
• Review errors, categorise them and work on
most important first
– https://www.petermessenger.com/ptx.aspx?Error
s=true
Test on different platforms
• Different browsers have different capabilities
and bugs
– Sauce Labs
– https://saucelabs.com/
– Allows you to run up different browsers and
mobile devices
– Lots of other similar resources
Output of Javascript
• Can be minified with source maps
– Allows the browser to convert the code back to
the original
– Break points, conditional values etc can be set in
the original
– Errors while using browser also show up in original
– Still gives user the benefit of faster load time
Examples of Debugging - Chrome
• https://www.petermessenger.com/ptx.aspx
• Right click on HTML Element
• Choose Inspect Element
– With Knockout Extension
– https://chrome.google.com/webstore/detail/knoc
koutjs-contextdebugg/oddcpmchholgcjgjdnfjmildmlielhof
– Knockout Context section – see bindings and make
sense of them
Examples of Debugging - Chrome
• https://www.petermessenger.com/ptx.aspx
• Open developer window
• Look at sources
– Can put breakpoints in at javascript version or
typescript version
– Ensure you have source maps turned on in settings
• Look at network
– Click on a option, can see Request Headers and
Response, allowing you to see what is going on
Examples of Debugging - Chrome
• https://www.petermessenger.com/ptx.aspx
• Open developer window
• Look at console
– Can be used as a debug window
– Use console.log(“text”) in javascipt
– Can also output objects
Questions
Thanks for listening
http://www.petermessenger.com
Email : stonecourier@gmail.com
Twitter : stonecourier
Linked In : http://www.linkedin.com/in/petermessenger