Presentation is loading. Please wait.

Presentation is loading. Please wait.

Writing better HTML5 websites and debugging them By Peter Messenger Senior Developer – Triple Point Technology

Similar presentations


Presentation on theme: "Writing better HTML5 websites and debugging them By Peter Messenger Senior Developer – Triple Point Technology"— Presentation transcript:

1 Writing better HTML5 websites and debugging them By Peter Messenger Senior Developer – Triple Point Technology Twitter : stonecourier Linked In :

2 Summary Writing HTML5 Websites generally requires a lot of javascript So will talk about Writing Better Code Monitoring Errors Testing Debugging in Chrome

3 Write Better Code Use typescript to write your client code code – – 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

4 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 – – Tools to make programming easier – Includes typescript, JSHint – Source Maps

5 Write Better Code Use MVVM framework or something similar – – Enables testable javascript and easy binding to html – https://angularjs.org/ https://angularjs.org/ – Much more popular, complete toolset, lots of user addons

6 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

7 Monitor Errors Review errors, categorise them and work on most important first – https://www.petermessenger.com/ptx.aspx?Error s=true

8 Test on different platforms Different browsers have different capabilities and bugs – Sauce Labs – https://saucelabs.com/ https://saucelabs.com/ – Allows you to run up different browsers and mobile devices – Lots of other similar resources

9 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

10 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-context- debugg/oddcpmchholgcjgjdnfjmildmlielhof https://chrome.google.com/webstore/detail/knoc koutjs-context- debugg/oddcpmchholgcjgjdnfjmildmlielhof – Knockout Context section – see bindings and make sense of them

11 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

12 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

13 Questions Thanks for listening Twitter : stonecourier Linked In :


Download ppt "Writing better HTML5 websites and debugging them By Peter Messenger Senior Developer – Triple Point Technology"

Similar presentations


Ads by Google