、資源面板 source

1區域網站的資源文件，2區域網頁文件的代碼，3區域信息顯示及調試的地方。

2、調試變量的console。

3、breakpoint斷點面板：

點擊3行右邊的breakpoint面板上代碼的位置。

watch:觀察js代碼中變量的值,+號添加變量的值

call stack:查看js代碼函數調用情況

scope：查看當前變量值

4、調試和跟蹤：

通過按鈕，一步一步調試js代碼。

剛學習 JS 的時候，總是聽過一個名詞：命名空間。當時對這個東西并不能夠很好的理解，命名為什么還會有空間呢？加上空間能有什么用處？

其實在很多編程語言中，都有命名空間這個概念，它們自身就已經具備了很好的文件和包管理機制，通過 import include require 等等命令，能夠引入其他的模塊、包或者文件，從而避免文件之間的變量命名重復問題。

然而在 JS 中，腳本文件是通過 script 標簽引入的，同時由于 JS 的變量和函數聲明的特殊性，一不小心就會造成環境污染，將一個變量或者屬性暴露在全局，或者被別的文件中的同名變量所覆蓋，于是就有了命名空間這樣一個概念。

在 js 中，聲明變量時加上關鍵字和不加關鍵字是不一樣的，var arg = 1 這樣的聲明，arg 的作用域只在當前頁面或者當前的方法中；但是如果聲明時不加 var而是直接聲明 arg = 1 ，js 就會認為這是一個全局變量，即使它是在一個函數體中聲明的。

/* a.js */
var people = 'xiaoming'
/* b.js */
var people = {
 name: 'xiaohong',
 age: 18
}
/* index.html */
<script src="./a.js"></script>
<script src="./b.js"></script>
console.log(people === 'xiaoming') // false

在上面的代碼塊中，后引入頁面的 b.js 文件的 people 變量就覆蓋了 a.js 的 people 變量

上面這種情況，通過命名空間我們就可以很好地解決：

// 如果在 window 上沒有 ns 屬性，就將 ns 屬性掛載到 window 上，作為根空間存在
if (!window.ns) window.ns = {}
// 當我們需要聲明一個新的變量或者方法時，就可以添加到 ns 中，但是如果在 ns 上隨意添加，依然會出現覆蓋的情況，所以可以以文件為區分單位來添加
/* a.js */
var a = {}
a.people = 'xiaoming'
a.getPeopleName = function () {
 return a.people
}
ns.a = a
/* b.js */
var b = {}
b.people = {
 name: 'xiaohong',
 age: 18
}
ns.b = b
// 在頁面上引入上面兩個文件后，我們可以通過下面的方式來分開使用兩個 people
console.log(ns.a.people)
console.log(ns.b.people)
// 通過上面的方法，也可以實現在已經引入的腳本中調用其他腳本的變量和方法
/* c.js */
// 如果 ns.a 存在，則調用它的 getPeopleName 方法
ns.a && ns.a.getPeopleName()

上面的代碼塊已經簡單的說明了命名空間的書寫方式，當然你也可以通過其他方式來確定命名空間的各級空間命名方式，比如根節點就可以模仿其他語言的方式，通過倒寫的域名來表示 com.google.www

既然命名空間的主要作用是用來防止變量被覆蓋、污染全局環境，那么有沒有其他方式來實現這一的作用呢？

最簡單的，通過立即執行函數就可以比較好的解決這個問題（前提是變量要用 var const let） 聲明：

const moduleA = function () {
 // 私有變量、方法寫在函數體中
 const a = 1
 function func1 () {...}
 // 需要暴露出來的方法通過返回一個對象寫在 return 中
 return {
 b: 2,
 func2: () => {...}
 }
} ()
moduleA.a // 報錯
moduleA.b // 2

或者通過現在普遍使用的 require.js 等第三方庫，ES6 支持的 import 語法來實現模塊的引入，也可以防止模塊之間的變量覆蓋等情況出現。