I tried three methods:

1. Using Array.splice()
2. Using Array.slice() and Array.concat()
3. Using the ES6 rest operator

The winner was using the combination of Array.slice() and Array.concat()—at least in Chrome 47 and Firefox 43. 2nd place goes to using the ES6 rest operator. Check out the jsPerf.

There are also more performant ways to insert to the beginning and end of an array that aren't commonly used. In short, for adding to the beginning of an array, you may typically use existingArray.unshift(newItem), but [newItem].concat(existingArray) is way faster.

And for adding to the end of an array, you may typically use existingArray.push(newItem), but existingArray[existingArray.length] = newItem is faster.

Check out the jsPerf results for inserting to the beginning and to the end that were created by others.

You are given a string. Implement a function to perform basic string compression using the counts of repeated characters. For example, the string aabcccccaaa would become a2blc5a3. If the "compressed" string would not become smaller than the original string, the function should return the original string. For example, the string aabc would remain aabc because a2b1c1 is larger than the original.

This is a pretty simple problem to solve. Here is a basic implementation:

var compressedString = function(str) {  
  if (str.length < 3) return str;

  var compressedStr = '';
  var prevChar = str.charAt(0);
  var count = 1;

  for (var i = 1; i < str.length; i++) {
    if (str[i] !== prevChar) {
      compressedStr += prevChar + count;
      prevChar = str[i];
      count = 1;
    } else {
      count++;
    }
  }
  compressedStr += prevChar + count;

  return compressedStr.length >= str.length ? str : compressedStr;
};

That was my initial stab at the solution. I was then curious to see how others went about it. While I was doing research, I learned something new. The string concatenation happening within the for-loop using compressedStr += prevChar + count can potentially operate in O(n²) time, depending on the environment; some browsers have optimizations to make string concatenation more performant.

In JavaScript, strings are immutable—they cannot be changed. As a result, doing concatenation using += will create a copy of the string by iterating through each character one at a time (O(n)), and then appending the new string to the end. So because the string concatenation happens in linear time, and you have to iterate up to n characters with the for-loop, that results to O(n²).

If you have a large string and time is important, then a data structure like a StringBuffer would give you O(n) time. In a nutshell, a StringBuffer is an array that progressively collects each character of a string, and then at the end, it joins all the characters as a string. Thus, the concatenation only happens once at the very end instead of each time a new character is added. That does mean you end up with O(n) space though.

But wait, StringBuffer doesn't exist in JavaScript! Well, we can create a basic version of a StringBuffer. Check it:

var compressedString = function(str) {  
  if (str.length < 3) return str;

  var compressedStrArray = [];
  var index = 0;
  var char = str.charAt(0);
  var count = 1;

  for (var i = 1; i < str.length; i++) {
    if (str[i] !== char) {
      index = setChar(compressedStrArray, index, char, count);
      char = str[i];
      count = 1;
    } else {
      count++;
    }
  }
  setChar(compressedStrArray, index, char, count);
  var compressedStr = compressedStrArray.join('');

  return compressedStr.length >= str.length ? str : compressedStr;
};

var setChar = function(array, index, char, count) {  
  array[index++] = char;
  array[index++] = count;
  return index;
};

One optimization included is using the helper function, setChar, to append characters to the array representing the StringBuffer. The Array.prototype.push method could have been used to append new characters to the StringBuffer, but referencing an index is faster.

So is it still "safe" to use += concatenation? Absolutely, but you need to consider the environment where your code is running. Recent browsers will have optimizations for +=. Also, if you are doing a one-time concatenation and not concatenating within a loop, feel free to use +=.

When you need to search or traverse a graph or tree-like structure, there are two common algorithms: breadth-first search and depth-first search.

Which algorithm to use really depends on the structure of the tree and the location of the items you need to find. Here are some quick guidelines (not steadfast rules) for determining which algorithm to use:

Breadth-first:

• The target is not far from the root
• You are looking for the shortest path from the root
• You have a lot of memory to work with

Depth-first:

• The target is deep in the tree
• You don't care for the shortest path from the root
• The tree is very wide and you have limited memory

Sample Code

var Tree = function(value) {  
  this.value = value;
  this.children = [];
};

// Assume we have helper functions to add and remove children
Tree.prototype.addChild = function(child) {/* Code to add child */};  
Tree.prototype.removeChild = function(child) {/* Code to remove child */};

// Breadth-first search
Tree.prototype.BFS = function(filter) {  
  var queue = [this]; // The queue of nodes to check, starting with the current node

  while (queue.length) {
    var node = queue.shift(); // Remove and examine first element in queue
    if (filter(node.value)) return node; // Found target node
    queue = queue.concat(node.children); // Node is not target, add its children to the queue
  }

  return null; // No result found
};

// Depth-first search
Tree.prototype.DFS = function(filter) {  
  if (filter(this.value)) return this; // Found target node

  for (var i = 0; i < this.children.length; i++) {
    var search = this.children[i].DFS(filter); // Recurse down the tree
    if (search) return search;
  }

  return null; // No result found
};

Now let's say our tree contains nodes that hold a number, and we want to find the first node with a value divisible by 5. Here is how we can set up that tree and use BFS and DFS to find the target node:

var root = new Tree(1);  
var branch1 = root.addChild(2);  
var branch2 = root.addChild(3);  
var branch3 = branch1.addChild(4);  
var branch4 = branch1.addChild(5);  
var leaf1 = branch2.addChild(6);  
var leaf2 = branch2.addChild(7);  
var leaf3 = branch3.addChild(8);  
var leaf4 = branch3.addChild(9);  
var leaf5 = branch4.addChild(10);

var filter = function(value) {  
  return value % 5 === 0;
};

var node = root.BFS(filter); // Returns the node with value 5  
var node = root.DFS(filter); // Returns the node with value 5  

When trying to find the first node divisible by 5 using BFS, this is the order of which the nodes are examined: 1 -> 2 -> 3 -> 4 -> 5. And when using DFS: 1 -> 2 -> 4 -> 8 -> 9 -> 5.

let and const

let can be used to declare variables just like var, but let has no hoisting, it has lexical scoping within () and {} blocks, and you cannot redeclare a variable that was declared with let.

for (let i = 0; i < 3; i++) {  
  console.log(i); // logs 0, 1, and 2
}
console.log(i); // throws an error  

const is like let, but you cannot reassign a value.

const pi = 3.14;  
pi = 3; // throws an error  

Arrow Functions

This is very much like CoffeeScript, except there is only fat arrow (=>), and no regular arrow (->).

// ES6 way
let fn = (a, b, c) => {  
  console.log(a, b, c);
  return true;
};

fn(1, 2, 3); // logs "1 2 3" and returns true

// ES5 way
var fn = function(a, b, c) {  
  console.log(a, b, c);
  return true;
};

And just like CoffeeScript, the fat arrow will automatically bind the function to the current value of this during declaration.

// ES6 way
let Human = (age) => {  
  this.age = age || 0;
  setInterval(() => {
    this.age++; // `this` will properly refer to the Human object
  }, 1000);
};

// ES5 way
var Human = function(age) {  
  var self = this;
  self.age = age || 0;
  setInterval(function() {
    self.age++;
  }, 1000);
};

Another thing to point out is that if the function body is just one line, there will be an implicit return. The two functions below do the same thing.

let add10 = (x) => x + 10;

let addTen = (x) => {  
  return x + 10;
};

Classes

Classes are how you can implement inheritance in ES6. Unlike function declarations, class declarations are not hoisted, so a class must be declared before attempting to access it.

class Human {  
  constructor(name, diet) {
    this.name = name;
    this.diet = diet;
  }
  report() {
    return this.name;
  }
}

class Omnivore extends Human {  
  constructor(name) {
    super(name, "omnivore");
  }
  report() {
    return super.report() + ": I eat everything!";
  }
}

class Vegetarian extends Human {  
  constructor(name) {
    super(name, "vegetarian");
  }
  report() {
    return super.report() + ": I don't eat meat";
  }
}

let meatLover = new Omnivore("Mary");  
console.log(meatLover.report()); // logs "Mary: I eat everything!"  
let meatHater = new Vegetarian("Ellen");  
console.log(meatHater.report()); // logs "Ellen: I don't eat meat"  

Also notice how the report method doesn't need a let or var in front of it. It's automatically recognized as a method.

Template Strings

Use backticks instead of single or double quotes to embed expressions within strings and create string interpolation.

var a = 1;  
var b = 2;  
console.log(`${a} + ${b} = ${a + b}`); // logs "1 + 2 = 3"  

Spread Operator

If you want an easy way to expand an expression in function calls or array literals, use the spread operator, ....

let nums1 = [1,2,3];  
let nums2 = [4,5,6];  
console.log(...nums1) // logs "1 2 3"  
let nums = [...nums1, ...nums2];  
console.log(nums); // logs "1,2,3,4,5,6"

var print = (a, b, c, d, e) => {  
  console.log(a, b, c, d, e);
};
var args = [2, 3];  
print(1, ...args, 4, ...[5]); // logs "1 2 3 4 5"  

Rest Parameters

Prefixing the last named argument of a function with ... will allow you to represent an indefinite number of arguments as an array.

There are some differences between rest parameters and the arguments object.

• Rest parameters are only the ones not given a separate name, while the arguments object contains all arguments passed to the function
• The arguments object is not a real array, while rest parameters are Array instances, so you can use native Array methods on it
• The arguments object has additional functionality specific to itself (like the callee property)

let logNums = (first, second, third, ...others) => {  
  console.log(first, second, third, others) // logs "1 2 3 4,5,6,7,8"
  console.log(others) // logs "4,5,6,7,8"
  console.log(others.map(function(num) {
    return num * 2;
  })); // logs "8,10,12,14,16"
};
logNums(1,2,3,4,5,6,7,8);  

Default Parameters

Now you can define default values to use for function parameters if no value or undefined is passed. By default, if no value is passed, JavaScript will set the parameter value to undefined, but you can now use your own default value.

let multiply = (x, y = 1) => x * y;  
console.log(multiply(4)); // logs "4"  

Not the End

This is just a taste of what's to come in ES6. There are many more features I didn't mention. It's going to be interesting seeing how companies and the community go about adopting ES6. Are your socks still on?

This post is written in the context of using a GitHub workflow.

Prerequisites

I'm also going to assume you have upstream and origin remotes set up in your local repository. upstream should point to the main repo that is shared by the team and origin should point to your personal (forked) repo. If you are not familiar with this concept, check out this tutorial.

Let's get started

Let's say this is the most recent tip of the current master in upstream as well as on your local machine:

*   d4138b6 2015-05-15 | Merge pull request #8 from aapple/feat/resize-method (HEAD, upstream/master, origin/master) [Billy Banana]
|\  
| * 7e31ce9 2015-05-15 | Add resize method [Adam Apple]
|/
*   9a24fe0 2015-05-13 | Merge pull request #7 from bbanana/feat/insert-method [Cathy Cherry]

And let's say Denise Date is working on a new feature and has submitted a pull request. Denise followed best practice and did her work in a feature branch on her local machine and then pushed to her GitHub forked repo. Her feature branch is called feat/remove-method.

So now, we want to pull down her changes and do a code review and make sure everything is fine with the new changes. From your local machine, you want to do the following:

• Create a remote for Denise's repo if it doesn't already exist with git remote add denise <REPO URL>
• Make sure you are on master by using git checkout master
• Create a branch for testing Denise's new code by using git checkout -b feat/remove-method
• Pull down Denise's code into the branch with git pull --rebase denise feat/remove-method
• Test test test

For the git pull into the feature branch, you don't technically need the --rebase, but it's good to use to have a cleaner commit history since it will not create a merge commit. Denise's code should now be combined with the existing codebase.

Now from the feat/remove-method branch in your local repo, the commit history will look something like this:

* cafd1a5 2015-05-14 | Add remove method (HEAD, denise/feat/remove-method, feat/remove-method) [Denise Date]
*   d4138b6 2015-05-13 | Merge pull request #8 from aapple/feat/resize-method (HEAD, upstream/master, origin/master, master) [Billy Banana]
|\  
| * 7e31ce9 2015-05-12 | Add resize method [Adam Apple]
|/
*   9a24fe0 2015-05-11 | Merge pull request #7 from bbanana/feat/insert-method [Cathy Cherry]

After reviewing her code and making sure everything works, when the pull request is merged into upstream/master, you should also make sure your local and fork master branch are synchronized with upstream.

Leave small insignificant commits out of the final commit history. In other words, the master commit history should not contain commit messages like, "Test a new function" or "Begin work on X." These kinds of messages pollute the commit history and makes it difficult to find where a major change started and ended. If there were many small commits that led to a significant change, there should be one commit that encompasses all those small commits.

So how do we go about cleaning up the commit history before merging with master? We can use git rebase -i. You can use this command to do a variety of tasks like reordering commits, deleting commits, updating commit messages, combining commits, and more. This post will focus on combining commits, or squashing them.

Assume we have the following commit history (shown with the latest commit first) and we want to combine the last 3 commits:

408xcad Return result  
48copd7 Calculate square root  
8cj3x7z Check input type  
pl707da Add functionality for calculating the square of a number  

We will type the following in the shell:
git rebase -i HEAD~3

This will bring up your default text editor and will show the following:

pick 8cj3x7z Check input type  
pick 48copd7 Calculate square root  
pick 408xcad Return result

# Rebase pl707da..408xcad onto pl707da
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell

The oldest commit will be at the very top. Since we want to combine these three commits into one, we will update the lines like so in the text editor:

pick 8cj3x7z Check input type  
squash 48copd7 Calculate square root  
squash 408xcad Return result

# Rebase pl707da..408xcad onto pl707da

Save and close the editor. Git will then automatically launch the editor again, and this time, you can specify the commit message of the combined snapshot. The initial prompt will be something like this:

# This is a combination of 3 commits.
# The first commit's message is:
Check input type

# This is the 2nd commit message:

Calculate square root

# This is the 3rd commit message:

Return result  

Since we are squashing the 2nd and 3rd commits into the 1st commit, we'll update the commit message of the first message like so:

# The first commit's message is:
Add functionality for calculating the square root of a number  

Now save and close the editor. Then check out your commit history using git log and you should see the following:

6c8a3ll Add functionality for calculating the square root of a number  
pl707da Add functionality for calculating the square of a number  

Have you ever noticed a HTTP OPTIONS request being sent from your browser to a server, but never knew what it meant? Here's how it looks like in Chrome Developer Tools:

This is your browser attempting a cross-site HTTP request. Per MDN:

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request.

It is common for pages to load resources from different hosts. These resources typically include CSS stylesheets, scripts, images, etc. However, if a script is able to load resources from or create resources on another host, that could be problematic in terms of security. As such, browsers implement a same-origin policy whereby a script on one resource/page can access data from another resource/page, as long as the resources have the same origin/host. Having scripts retrieve and send data without having to leave a page is extremely useful. This is where AJAX comes into play. However, the same-origin policy is still an obstacle.

One way to work around the same-origin policy with AJAX is by using a technique called CORS (Cross-Origin Resource Sharing). This standard makes it so that browsers have to "preflight" a HTTP request with an OPTIONS request header. The OPTIONS request is sent to the target server, and the server (if configured properly) can respond to the OPTIONS request informing the client whether it is approved to access the resource. Think of it as requiring the client to ask for permission from the server before the client can send across the XMLHttpRequest. But this standard isn't implemented in all browsers. The older versions of browsers do not support it.

Let's walk through an example. We have a messaging client on https://chat.com where users can post messages for other users to see. The messages are stored in a database, and served from https://messages.chat.com, which is a different host than chat.com (yes, a different subdomain still makes it under a different host). When a user fills out the form to submit a message from chat.com, the browser needs to make a POST request to messages.chat.com using AJAX, and the server will then store that message in the database. The API for posting messages states that the request must be sent to https://messages.chat.com/messages.

But because the client and server are on different hosts and the same-origin policy is in place, CORS can be used to successfully communicate with the server. Here are the steps to make this all happen:

After the application initiates the POST request, the browser will submit a HTTP OPTIONS request to the server before actually sending the POST request. This is the preflight request, and it will look something like this:

OPTIONS /messages/ HTTP/1.1  
Host: messages.chat.com  
Accept: */*  
Access-Control-Request-Method: POST  
Access-Control-Request-Headers: accept, content-type  
Origin: https://chat.com  

The Access-Control-Request-Method header informs the server that when the actual request is sent, it will be in the form of a POST. The Access-Control-Request-Headers header lets the server know what other headers will be included in the actual request. Finally, the Origin header indicates the server/host that made the request. In this example, let's say the server is configured to respond to OPTIONS request, and allows any host to make GET, PUT, POST, and DELETE requests. So, the server will respond back with something like this:

HTTP/1.1 200 OK  
Access-Control-Allow-Origin: *  
Access-Control-Allow-Methods: GET,PUT,POST,DELETE  
Access-Control-Allow-Headers: Content-Type, Accept  

The Access-Control-Allow-Origin header indicates that all hosts are allowed, the Access-Control-Allow-Methods header indicates the HTTP methods that are allowed, and the Access-Control-Allow-Headers header tells the client what other headers can be included in the POST request.

After the preflight OPTIONS request is acknowledged and approved by the server and sent back to the client, the client can then proceed with submitting the actual POST request.

And that's how CORS works. Remember, the server has to be configured to properly respond to OPTIONS requests if it wants to allow other hosts to access resources. More details about the standard, headers, and compatible browsers can be found on MDN.

In addition, all examples are written using the pseudoclassical instantiation pattern.

var SuperClass = function() {  
  this.prop1 = 50;
};
SuperClass.prototype.superMethod = function() {  
  console.log('This is a super method.');
};

A subclass is a class that inherits all the properties of another class, and at the same time, the subclass can add or modify properties. Therefore, a property can be defined in the parent class and shared with the subclass without having to define that property over again in the subclass. Any failed lookups of properties on the subclass will delegate up the prototype chain of parent classes. This is done by setting the subclass's prototype to point to the prototype chain of its parent.

Before we look at the correct way to create subclasses, let's look at the wrong ways first.

var SubClass = function() {  
  this.prop2 = 100;
};
SubClass.prototype = SuperClass.prototype;  
SubClass.prototype.superMethod = function() {  
  console.log('This is a sub method.');
};

var superObj = new SuperClass();  
superObj.superMethod(); // logs 'This is a sub method.'  
var subObj = new SubClass();  
subObj.superMethod(); // logs 'This is a sub method.'  

In the above example, SubClass's prototype is being assigned to the same object as SuperClass's prototype. If a property is then defined on SubClass.prototype with the same name as a property in SuperClass—superMethod in the example—then it will override that property in SuperClass, and it would affect all instances of SuperClass. Again, this is an example of how not to create subclasses.

Another common mistake that is still being used is the following:

var SubClass = function() {  
  this.prop2 = 100;
};
SubClass.prototype = new SuperClass();  

Sure, this works. Calling new SuperClass() will create a new object that delegates to SuperClass.prototype. However, using this pattern is not best practice, and there will be times where this will not work. For example, what if we slightly change SuperClass to take in an argument and use it during instantiation?

var SuperClass = function(value) {  
  this.prop1 = value * 2;
};
var SubClass = function() {  
  this.prop2 = 100;
};
SubClass.prototype = new SuperClass();  
var subObj = new SubClass();  
console.log(subObj.prop1); // logs NaN  

Notice that when calling subObj.prop1, it didn't return a number. This breaks our expectation on having a number for the property and may even break functionality in the application.

Even if SuperClass doesn't make use of any arguments, it is still a bad practice to set the prototype as a new instance of the parent class because doing so would create exactly that, a new instance of the parent class. Why create another object when you're not going to interact with it?

So here is the correct way to create subclasses as of ES5.1 (ECMA-262):

var SuperClass = function(value) {  
  this.prop1 = value * 2;
};
SuperClass.prototype.superMethod = function() {  
  console.log('This is a super method.');
};
var SubClass = function(value) {  
  SuperClass.call(this, value);
  this.prop2 = 100;
};
SubClass.prototype = Object.create(SuperClass.prototype);  
SubClass.prototype.constructor = SubClass;  
SubClass.prototype.superMethod = function() {  
  console.log('This is a super method on sub.');
};
SubClass.prototype.subMethod = function() {  
  console.log('This is a sub method.');
};

var superObj = new SuperClass(25);  
var subObj = new SubClass(30);  
console.log(superObj.prop1); // logs 50  
superObj.superMethod(); // logs 'This is a super method.'  
console.log(subObj.prop1); // logs 60  
console.log(subObj.prop2); // logs 100  
subObj.superMethod(); // logs 'This is a super method on sub.'  
subObj.subMethod(); // logs 'This is a sub method.'  

Key takeaways about this approach:

1. When instantiating a new instance of SubClass, it is not going to instantiate a new instance of SuperClass
2. subObj.prop1 evaluates correctly because when SubClass creates a new instance, it is invoking the SuperClass function with call() and passing in value
3. superMethod on SubClass does not override superMethod on SuperClass
4. A new instance of SuperClass is not created when setting SubClass.prototype but SuperClass's prototype chain is still passed to SubClass's prototype
5. SubClass.prototype.constructor is set to refer to the SubClass constructor function because otherwise, it would use the same constructor function as SuperClass since that's the constructor in SuperClass.prototype (remember, failed lookups on the subclass will delegate up the prototype chain)

That's it. Look out for ES6. It introduces the class keyword for creating classes.

Binding Patterns for this

this can only be bound by one of five patterns, and more importantly, this is bound to an object at call time. So how do you determine which pattern was used during call time?

1. Run the code in the debugger and pause at the line that refers to this
2. Scan outward looking for the closest enclosing function body
3. Once you find the function this appears in, examine the call stack and look one level down to where this function was called
4. Identify the syntax of how the function was called to determine the run pattern

Let's take a look at each pattern.

Tip:

Most of the time, when inside a function, this will be bound to the object that was to the left of the call time dot.

Global Reference

console.log(this); // logs window from the browser  

Consider the above code that runs in the global scope. It is not enclosed in a function. Since this is automatically bound while inside a function body, JavaScript wanted to be consistent in having this be bound to something, so when outside a function body, this will be bound to the global context, which in the case of a browser, is window.

Free Function Invocation

var fn = function() {  
  console.log(this);
};

fn(); // logs window from the browser  

fn is being invoked in the global context. Like before, this will be bound to the global context because that is the context during run time when fn is invoked.

ABC (.apply, .bind, .call)

var fn = function() {  
  console.log(this);
};

var obj1 = {};  
var obj2 = {};

fn.apply(obj); // logs obj1

fn2 = fn.bind();  
fn2(); // logs obj2

fn.call(obj); // logs obj1  

In this scenario, when using the native apply, bind, and call Function methods, you can manually pass in an object, and this will be bound to that object. This allows you to predictively make use of this.

Method Invocation

var fn = function() {  
  console.log(this);
};

var obj1 = {mtd: fn};  
var obj2 = {mtd: obj1.mtd};  
obj1.mtd(); // logs obj1  
obj2.mtd(); // logs obj1  

Since fn is being invoked as a method whatever object is on the left of the call time dot will be bound to this. With obj2.mtd, it refers to obj1's mtd method, and invoking obj.mtd() would actually invoke fn as a method of obj1 since obj1 is to the left of the call time dot.

The phrase, call time dot, is important. Consider the following:

var obj1 = {mtd: fn};

obj1.mtd(); // logs obj1  
window.setTimeout(obj1.mtd, 1000); // logs window from the browser

/*
window.setTimeout() can be imagined like this:  
var setTimeout = function(callback, delay) {  
  wait(delay); // some logic to wait a certain amount of time
  callback();
};
*/

With setTimeout(), it takes in a function and delay (in milliseconds), and it invokes the function after the delay. In this case, since fn (the callback function that is passed as the first argument into setTimeout()) is invoked as a free function invocation, this is bound to the global context, window.

Construction Mode

var fn = function() {  
  console.log(this);
};

var obj = {mtd: fn};

obj.mtd(); // logs obj  
var obj1 = new fn(); // logs a new object  
var obj2 = new obj.mtd(); // logs a new object  

A function invoked with the new keyword means the function is considered a constructor function. This expression will create a new object that is an instance of the constructor function, and the function will execute in the context of that newly-created object.

In addition, the new keyword will override the method invocation pattern. In the example, new obj.mtd() would not bind this to obj even though obj is to the left of the call time dot. Instead, this is bound to the newly-created object from the constructor function.

Summary

I hope this helped gives clarity on how this is bound. Remember, most of the time, when inside a function, this will be bound to the object that was to the left of the call time dot.

One of the many useful features of Chrome Developer Tools (DevTools) is the blackbox preference. Normally when debugging code, if you step through code that references external source files (e.g., jQuery, Underscore.js, etc.), the debugger will step through that library code. Sometimes this may be good if you want to debug the library code, but most of the time, you trust the library code should be stable and you just want to focus on your code.

With the blackbox preference, DevTools can ignore or bypass any source files you choose during debugging. This means the debugger won't go into blackboxed files when stepping through code, and breakpoints in blackboxed files, if any, will also be ignored (i.e., the debugger will not pause at such breakpoints). This will save you time and minimize confusion in times where library code could generate a deep call stack.

How to blackbox

1. In DevTools, navigate to the Sources panel

2. Right click the source file you want to blacklist in the navigator pane and select Blackbox Script

   

Manage blackboxed scripts

If you ever want to add, modify, or remove blackboxes, you can do so by going into the Settings.

1. In DevTools, navigate to the Settings panel

2. Under the Sources section, click Manage framework blackboxing

   

3. In the pop-up dialog, modify blackbox scripts as you wish

   

FYI, the URI pattern can accept the following values:

• The file name, e.g., jquery.js would match any files with "jquery.js" in its name
• A regular expression, e.g., \.min\.js$ would match any files ending in "min.js"
• A reference to an entire folder, e.g., bower_components would match all files within the "bower_components" folder

You can read more information about blackboxing from the Chrome Documentation.