step over next function call跨過，實際表現是不遇到函數時，執行下一步。遇到函數時，不進入函數直接執行下一步。
step into next function call跨入，實際表現是不遇到函數時，執行下一步。遇到到函數時，進入函數執行上下文。
step out of current function跳出當前函數
deactivate breakpoints停用斷點
don't pause on exceptions不暫停異常捕獲
其中跨過，跨入，跳出是我使用最多的三個操作。
上圖右側第二個紅色箭頭指向的是函數調用棧（call Stack），這裡會顯示代碼執行過程中，調用棧的變化。
右側第三個紅色箭頭指向的是作用域鏈（Scope），這裡會顯示當前函數的作用域鏈。其中Local表示當前的局部變量對象，Closure表示當前作用域鏈中的閉包。藉助此處的作用域鏈展示，我們可以很直觀的判斷出一個例子中，到底誰是閉包，對於閉包的深入瞭解具有非常重要的幫助作用。
三、斷點設置
在顯示代碼行數的地方點擊，即可設置一個斷點。斷點設置有以下幾個特點：
在單獨的變量聲明(如果沒有賦值)，函數聲明的那一行，無法設置斷點。
設置斷點後刷新頁面，JavaScript代碼會執行到斷點位置處暫停執行，然後我們就可以使用上邊介紹過的幾個操作開始調試了。
當你設置多個斷點時，chrome工具會自動判斷從最早執行的那個斷點開始執行，因此我一般都是設置一個斷點就行了。
四、實例
接下來，我們藉助一些實例，來使用斷點調試工具，看一看，我們的demo函數，在執行過程中的具體表現。
// demo01
var fn;function foo() {
var a = 2;
function baz() {
console.log( a );
}
fn = baz;
}function bar() {
fn();
}
foo();
bar(); // 2
在向下閱讀之前，我們可以停下來思考一下，這個例子中，誰是閉包？
這是來自《你不知道的js》中的一個例子。由於在使用斷點調試過程中，發現chrome瀏覽器理解的閉包與該例子中所理解的閉包不太一致，因此專門挑出來，供大家參考。我個人更加傾向於chrome中的理解。
第一步：設置斷點，然後刷新頁面。
第二步：點擊上圖紅色箭頭指向的按鈕（step into），該按鈕的作用會根據代碼執行順序，一步一步向下執行。在點擊的過程中，我們要注意觀察下方call stack 與 scope的變化，以及函數執行位置的變化。
一步一步執行，當函數執行到上例子中
我們可以看到，在chrome工具的理解中，由於在foo內部聲明的baz函數在調用時訪問了它的變量a，因此foo成為了閉包。這好像和我們學習到的知識不太一樣。我們來看看在《你不知道的js》這本書中的例子中的理解。
書中的註釋可以明顯的看出，作者認為fn為閉包。即baz，這和chrome工具中明顯是不一樣的。
而在備受大家推崇的《JavaScript高級編程》一書中，是這樣定義閉包。
這裡chrome中理解的閉包，與我所閱讀的這幾本書中的理解的閉包不一樣。其實在之前對於閉包分析的文章中，我已經有對這種情況做了一個解讀。
閉包是一個特殊對象，它由執行上下文(代號A)與在該執行上下文中創建的函數(代號B)共同組成。
當B執行時，如果訪問了A中變量對象中的值，那麼閉包就會產生。
那麼在大多數理解中，包括許多著名的書籍，文章裡都以函數B的名字代指這裡生成的閉包。而在chrome中，則以執行上下文A的函數名代指閉包。
我們修改一下demo01中的例子，來看看一個非常有意思的變化。
// demo02var fn;var m = 20;function foo() {
var a = 2;
function baz(a) {
console.log(a);
}
fn = baz;
}function bar() {
fn(m);
}
foo();
bar(); // 20
這個例子在demo01的基礎上，我在baz函數中傳入一個參數，並打印出來。在調用時，我將全局的變量m傳入。輸出結果變為20。在使用斷點調試看看作用域鏈。
是不是結果有點意外，閉包沒了，作用域鏈中沒有包含foo了。我靠，跟我們理解的好像又有點不一樣。所以通過這個對比，我們可以確定閉包的形成需要兩個條件。
在函數內部創建新的函數；
新的函數在執行時，訪問了函數的變量對象；
還有更有意思的。
我們繼續來看看一個例子。
// demo03
function foo() {
var a = 2;
return function bar() {
var b = 9;
return function fn() {
console.log(a);
}
}
}
var bar = foo();var fn = bar();
fn();
在這個例子中，fn只訪問了foo中的a變量，因此它的閉包只有foo。
修改一下demo03，我們在fn中也訪問bar中b變量試試看。
// demo04
function foo() {
var a = 2;
return function bar() {
var b = 9;
return function fn() {
console.log(a, b);
}
}
}
var bar = foo();var fn = bar();
fn();
這個時候，閉包變成了兩個。分別是bar，foo。
我們知道，閉包在模塊中的應用非常重要。因此，我們來一個模塊的例子，也用斷點工具來觀察一下。
// demo05
(function() {
var a = 10;
var b = 20;
var test = {
m: 20,
add: function(x) {
return a + x;
},
sum: function() {
return a + b + this.m;
},
mark: function(k, j) {
return k + j;
}
}
window.test = test;
})();
test.add(100);
test.sum();
test.mark();
var _mark = test.mark;
_mark();
注意：這裡的this指向顯示為Object或者Window，大寫開頭，他們表示的是實例的構造函數，實際上this是指向的具體實例
test.mark能形成閉包，跟下面的補充例子（demo07）情況是一樣的。
我們還可以結合點斷調試的方式，來理解那些困擾我們很久的this指向。隨時觀察this的指向，在實際開發調試中非常有用。
// demo06
var a = 10;var obj = {
a: 20
}
function fn () {
console.log(this.a);
}
fn.call(obj); // 20
最後繼續補充一個例子。
// demo07function foo() {
var a = 10;
function fn1() {
return a;
}
function fn2() {
return 10;
}
fn2();
}
foo();
這個例子，和其他例子不太一樣。雖然fn2並沒有訪問到foo的變量，但是foo執行時仍然變成了閉包。而當我將fn1的聲明去掉時，閉包便不會出現了。
那麼結合這個特殊的例子，我們可以這樣這樣定義閉包。
閉包是指這樣的作用域(foo)，它包含有一個函數(fn1)，這個函數(fn1)可以調用被這個作用域所封閉的變量(a)、函數、或者閉包等內容。通常我們通過閉包所對應的函數來獲得對閉包的訪問。
更多的例子，大家可以自行嘗試，總之，學會了使用斷點調試之後，我們就能夠很輕鬆的瞭解一段代碼的執行過程了。這對快速定位錯誤，快速瞭解他人的代碼都有非常巨大的幫助。大家一定要動手實踐，把它給學會。
最後，根據以上的摸索情況，再次總結一下閉包：
閉包是在函數被調用執行的時候才被確認創建的。
閉包的形成，與作用域鏈的訪問順序有直接關係。
只有內部函數訪問了上層作用域鏈中的變量對象時，才會形成閉包，因此，我們可以利用閉包來訪問函數內部的變量。
閱讀更多 前端全棧工程師之路 的文章
