From 6a83add5a793d613c7b2f069e26c06c96da4d4c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=86=89?= Date: Sun, 31 Jan 2016 02:29:56 +0800 Subject: [PATCH 1/3] example update --- README.md | 142 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 84 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 5889d5e..093992b 100644 --- a/README.md +++ b/README.md @@ -6,18 +6,18 @@ Test cases for content found in this guide can be found at https://mknichel.gith **Table of Contents** -* [Introduction](#introduction) -* [Anatomy of a JavaScript Error](#anatomy-of-a-javascript-error) - * [Producing a JavaScript Error](#producing-a-javascript-error) - * [Error Messages](#error-messages) - * [Stack Trace Format](#stack-trace-format) -* [Catching JavaScript Errors](#catching-javascript-errors) - * [window.onerror](#windowonerror) - * [try/catch](#trycatch) - * [Protected Entry Points](#protected-entry-points) - * [Promises](#promises) - * [Web Workers](#web-workers) - * [Chrome Extensions](#chrome-extensions) +* [Introduction](#introduction) +* [Anatomy of a JavaScript Error](#anatomy-of-a-javascript-error) + * [Producing a JavaScript Error](#producing-a-javascript-error) + * [Error Messages](#error-messages) + * [Stack Trace Format](#stack-trace-format) +* [Catching JavaScript Errors](#catching-javascript-errors) + * [window.onerror](#windowonerror) + * [try/catch](#trycatch) + * [Protected Entry Points](#protected-entry-points) + * [Promises](#promises) + * [Web Workers](#web-workers) + * [Chrome Extensions](#chrome-extensions) ## Introduction @@ -33,7 +33,7 @@ A JS Error can be thrown by the browser when a piece of code doesn't execute pro For example: -```javascript +``` javascript var a = 3; a(); ``` @@ -42,7 +42,7 @@ In this example, a variable that is actually a number can't be invoked as a func A developer might also want to throw an error in a piece of code if a certain precondition is not met. For example -```javascript +``` javascript if (!checkPrecondition()) { throw new Error("Doesn't meet precondition!"); } @@ -52,10 +52,10 @@ In this case, the error will be `Error: Doesn't meet precondition!`. This error There are multiple ways that developers can throw an error in JavaScript: -* `throw new Error('Problem description.')` -* `throw Error('Problem description.')` <-- equivalent to the first one -* `throw 'Problem description.'` <-- bad -* `throw null` <-- even worse +* `throw new Error('Problem description.')` +* `throw Error('Problem description.')` <-- equivalent to the first one +* `throw 'Problem description.'` <-- bad +* `throw null` <-- even worse Throwing a string or null is really not recommended since the browser will not attach a stack trace to that error, losing the context of where that error ocurred in the code. It is best to throw an actual Error object, which will contain the error message as well as a stack trace that points to the right lines of code where the error happened. @@ -67,9 +67,9 @@ However, browsers tend to diverge often as well. When there are multiple default You can find the templates that browsers use for error messages at: -* Firefox - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg -* Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js -* Internet Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h +* Firefox - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg +* Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js +* Internet Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h **![error message warning](https://mknichel.github.io/javascript-errors/ic_warning_black_18px.svg) Browsers will produce different error messages for some exceptions.** @@ -79,7 +79,7 @@ The stack trace is a description of where the error happened in the code. It is A basic stack trace looks like: -``` +``` at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9) at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3 ``` @@ -90,21 +90,21 @@ Unfortunately, there is no standard for the stack trace format so this differs b IE 11's stack trace looks similar to Chrome's except it explicitly lists Global code: -``` +``` at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3) at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3) ``` Firefox's stack trace looks like: -``` +``` throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9 @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3 ``` Safari's format is similar to Firefox's format but is also slightly different: -``` +``` throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18 global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13 ``` @@ -123,19 +123,19 @@ Diving in more, there are a lot of nuances to stack trace formats that are discu By default, anonymous functions have no name and either appear as empty string or "Anonymous function" in the function names in the stack trace (depending on the browser). To improve debugging, you should add a name to all functions to ensure it appears in the stack frame. The easiest way to do this is to ensure that anonymous functions are specified with a name, even if that name is not used anywhere else. For example: -```javascript +``` javascript setTimeout(function nameOfTheAnonymousFunction() { ... }, 0); ``` This will cause the stack trace to go from: -``` +``` at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17 ``` to -``` +``` at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31) ``` @@ -145,21 +145,22 @@ This method ensures that `nameOfTheAnonymousFunction` appears in the frame for a Browsers will also use the name of the variable or property that a function is assigned to if the function itself does not have a name. For example, in -```javascript +``` javascript var fnVariableName = function() { ... }; ``` browsers will use `fnVariableName` as the name of the function in stack traces. -``` +``` at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9) at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37) ``` + Even more nuanced than that, if this variable is defined within another function, all browsers will use just the name of the variable as the name of the function in the stack trace except for Firefox, which will use a different form that concatenates the name of the outer function with the name of the inner variable. Example: -```javascript +``` javascript function throwErrorFromInnerFunctionAssignedToVariable() { var fnVariableName = function() { throw new Error("foo"); }; fnVariableName(); @@ -168,13 +169,13 @@ function throwErrorFromInnerFunctionAssignedToVariable() { will produce in Firefox: -``` +``` throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37 ``` In other browsers, this would look like: -``` +``` at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37) ``` @@ -184,7 +185,7 @@ at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors The display name of a function can also be set by the `displayName` property in all major browsers except for IE11. In these browsers, the displayName will appear in the devtools debugger, but in all browsers but Safari, it will **not** be used in Error stack traces (Safari differs from the rest by also using the displayName in the stack trace associated with an error). -```javascript +``` javascript var someFunction = function() {}; someFunction.displayName = " # A longer description of the function."; ``` @@ -203,7 +204,7 @@ In Chrome, this is really easy to do by using the `Error.captureStackTrace` API. For example: -```javascript +``` javascript function ignoreThisFunctionInStackTrace() { var err = new Error(); Error.captureStackTrace(err, ignoreThisFunctionInStackTrace); @@ -213,14 +214,14 @@ function ignoreThisFunctionInStackTrace() { In other browsers, a stack trace can also be collected by creating a new error and accessing the stack property of that object: -```javascript +``` javascript var err = new Error(''); return err.stack; ``` However, IE10 only populates the stack trace when the error is actually thrown: -```javascript +``` javascript try { throw new Error(''); } catch (e) { @@ -238,7 +239,7 @@ Chrome DevTools has support for async stack traces, or in other words making sur An async stack trace will look like: -``` +``` throwError @ throw-error.js:2 setTimeout (async) throwErrorAsync @ throw-error.js:10 @@ -257,14 +258,14 @@ Stack traces for code that was eval'ed or inlined into a HTML page will use the For example: -``` +``` at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9) at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3 ``` If these scripts actually come from a script that was inlined for optimization reasons, then the URL, line, and column numbers will be wrong. To work around this problem, Chrome and Firefox support the `//# sourceURL=` annotation (Safari and IE do not). The URL specified in this annotation will be used as the URL for all stack traces, and the line and column number will be computed relative to the start of the `