Sencha Touch快速入門2.0之Chorme瀏覽器調試功能介紹的內容是本文要講解的內容，繼續上篇Sencha Touch快速入門2.0之Sencha Touch App開發，再為大家奉獻一篇入門教學，這次是關于瀏覽器調試的。

無論你是在學習，還是做項目，熟練地掌握瀏覽器的調試功能，都將會有很大的幫助。調試能夠幫助你快速地了解框架，處理bug，讓你不論處理什么都能夠更快速，更準確。

在這篇文章里，我將詳細地為大家介紹chrome瀏覽器中常用的調試功能，對于其他的瀏覽器，大家同樣可以觸類旁通。接下來->打開chrome->按F12。開始chorome調試之旅吧！

一、JS調試

選中Script標簽之后，我們來到了JS調試界面。（單擊放大）

為大家講解一下各個區域的作用。

左上角有一個下拉框，用于選擇JS文件，還有后退以及前進按鈕，可以快速地返回之前調試的JS文件。

左側的代碼窗口，用處自然不必多說。在行數的地方點擊鼠標可以設置斷點。程序運行到斷點處時，可以鼠標在代碼上懸停，以查看變量、表達式的值。

右上角的幾個小按鈕，用于控制程序的執行（當然，要設置斷點以后才有用。）功能分別為執行至下一個斷點（F8）、執行至下一個函數調用結束(F10)、執行至下一個函數內部(F11)、跳出當前函數(Shift+F11)、禁用所有斷點。

右側的***個區域，用于觀察變量。點擊‘+’添加你要觀察的變量或者表達式，這樣的話，無論程序運行到哪里，你都能夠監視一些重要的值。

右側的第二個區域是函數的調用堆棧。在這里，我們可以看到函數的嵌套調用結構，點擊可以快速轉到函數的所在位置。

右側第三個區域，同樣是用于觀察變量的。這里分為Local和Global兩個。Local里，可以看到所有的當前作用域內的變量。而Global基本可以看到所有全局變量。

右側第四個區域，斷點管理。

按Esc鍵快速調出下面的的控制臺，在這里可以看到程序的各種輸出，。包括log、警告、異常。如果我們在代碼里面寫了console.log(o);語句，則o會在這里作為對象被輸出，這是調試過程中比較常用的功能。該值得一提的是，在這里，我們可以直接輸入代碼，立即執行。

其他區，大家自行探究吧，說了這么多，剩下的也就是孰能生巧啦。

二、CSS樣式調試

好吧，這回，我們不用F12。換個cool的方法。在頁面上你想調試的元素上點擊右鍵->審查元素(N)。然后，你就快速地來到CSS調試界面，并且已經幫你定位好元素。

左側是實時html結構。

右側***個區域是所有對當前元素起作用的CSS屬性。

右側第二個區可以看到文件里相應的CSS原文。

在這里，你可以直接對實時html結構進行編輯、可以對css進行編輯。重點是，你可以馬上看到修改的效果，再也不用一遍又一遍地刷新頁面了！

威老感嘆，這調試工具強大的一塌糊涂，但不知道火狐之類的瀏覽器調試功能如何呢。

也不必多想了，Sencha Touch只支持chrome和safari，火狐再強大也用不上。

小結：Sencha Touch快速入門2.0之Chorme瀏覽器調試功能介紹的內容介紹完了，希望通過本文的學習能對你有所幫助！