Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debug the Web 101

Debug the Web 101

Useful Javascript Debugging Techniques in production environment.

Ankur Agarwal

March 31, 2013
Tweet

Other Decks in Programming

Transcript

  1. 1. Error Message 2. Line No 3. Filename For the

    same origin only* * Some browsers provide information for cross origin as well Provides
  2. try { // Some code } catch (e) { //

    Character No // Stack Traces // Works for cross origin } Its simple to use
  3. Challenges 1. Need to add extra code 2. How to

    use with existing code and libraries ? 3. Performance Tradeoff
  4. function wrap(func) { function wrapped() { try { return func.apply(this,

    arguments); } catch (e) { console.log(e.message); throw e; } } return wrapped; } A simple wrapper
  5. function track (object) { for (var fn in object) {

    if (typeof fn === "function") { object[fn] = wrap(fn); } } } A object wrapper
  6. var obj = { a : 1 b : 2

    foo: { return "Hello World!" }, bar: { throw new Error("Hello World!"); } } track(obj); obj.foo(); // return "Hello World!" obj.bar(); // throws exception Example
  7. Challenges 1. Old IE doesn't have console 2. Console object

    is unavailable until opened 3. Don't want to throw logs in production
  8. if( (window && !window.console) || isProduction() ) { var apis

    = ['log','info','warn','error','assert','dir', 'clear','profile','profileEnd'], g, api, container = window.console = {}; for (g = 0; g < apis.length; g++) { api = apis[g]; container[api] = function () {}; } } function isProduction() { // Some logic return document.location.hostname !== "localhost"; } A simple wrapper
  9. function report(message, url, linenumber) { if (window.XMLHttpRequest) { var xhr

    = new XMLHttpRequest(); var scripturl = "http://yourdomain.example.com/report"; var log = linenumber + message + url; xhr.open("POST", scripturl); xhr.setRequestHeader("Content-Type", "text/plain; charset=UTF-8"); xhr.send(log); } } function reportEx(ex) { // Extract Info from exception var info = extract(ex); report(info.message, info.url, info.lineno); } Some Helpers
  10. window.onerror = report; // With try-catch try { // Some

    code } catch (e) { // Character No // Stack Traces // Works for cross origin reportEx(e); } Usage
  11. function asyncTrack(fnName) { var originalFn = window[fnName]; window[fnName] = function

    AsyncTrackingWrapper() { // Make a copy of the arguments var args = _slice.call(arguments); var originalCallback = args[0]; if (typeof originalCallback === "function") { args[0] = wrap(originalCallback); } // IE < 9 Hack if (originalFn.apply) { return originalFn.apply(this, args); } else { return originalFn(args[0], args[1]); } }; }; asyncTrack('setTimeout'); asyncTrack('setInterval');
  12. Simple Helpers function instrumentFunction(context, functionName, callback) { context = context

    || window; var original = context[functionName]; context[functionName] = function instrumented() { callback.apply(this, arguments); return context[functionName]._instrumented.apply( this, arguments); }; context[functionName]._instrumented = original; }
  13. Simple Helpers function deinstrumentFunction(context, functionName) { if (context[functionName].constructor === Function

    && context[functionName]._instrumented && context[functionName]._instrumented.constructor === Function) { context[functionName] = context[functionName]. _instrumented; } }
  14. jQuery // All methods of jquery will be wrapped track(jQuery);

    // A simple helper to track ajax errors $(document).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) { // Report this error report(thrownError, null, null); });
  15. Thank you For More Tips & Tricks Follow us on

    Twitter @D3buggify Signup for debugging your production code www.debuggify.net/signup