谷歌開發者工具執行JavaScript程式碼

谷歌開發者工具功能強大，不但可以通過它檢視元素的樣式，或者線上除錯頁面佈局。

可以線上執行JavaScript程式碼片段，從而實現便捷的除錯功能，非常實用。

從廣義上說，谷歌開發者工具有兩種執行JavaScript程式碼的功能，下面分別通過圖示進行演示。

一.Sources皮膚中建立：

首先介紹一下在Sources皮膚中執行JavaScript程式碼片段。

通過此皮膚建立和執行小段的JavaScript程式碼，且可以在不同頁面中執行，以當前頁面為執行上下文。

建立方式截圖如下：

（1）.首先定位到Sources選項卡皮膚：

點選Sources選項卡皮膚，可能當前並沒有我們所需要的選項。

此時可以點選紅框中的雙箭頭，然後選中如下選單：

選中此Snippets選單，此英文單詞翻譯成漢語具有"小片"或者"片段"的意思。

可見它是專業用來建立JavaScript程式碼片段的，然後我們就可以建立JavaScript程式碼片段了。

建立方式有多種，分別如下：

（1）.點選左側靠近頂部加號+可以建立程式碼片段。

（2）.右擊空白處，彈出New，然後點選建立具有同樣的效果。

進行上面任何一個操作之後，就可以在右側建立一個可編輯區域，然後在其中編寫小段JavaScript程式碼。

演示截圖如下：

按 Command+S (Mac) 或 Ctrl+S (Windows, Linux)儲存更改，根據自己的平臺選擇恰當方式。

上面已經建立JavaScript程式碼片段，下面再來介紹一下如何執行，有如下幾種方式：

（1）.點選右下方按鈕:

（2）.右鍵，在選單中選擇相應項即可：

通過Sources皮膚實現的方式很簡單，不再多介紹，按照上述步驟自己練習一下即可。

上文已經提到，從廣義上來說還有一種方式可以除錯JavaScript程式碼，那麼就是通過console控制檯。

此種方式可能在實際中應用更加廣泛，下面再來進行一下簡單介紹。

二.控制執行JavaScript程式碼：

非常簡單，點選console選項卡進入控制檯皮膚，然後在其中寫入簡單的JavaScript程式碼即可。

程式碼演示截圖如下：

上面程式碼宣告兩個變數，並求和，下面會列印出結果。

我們不但可以執行簡單的JavaScript程式碼，還可以進行dom操作。

比如在當前頁面有一個id屬性值為"diy_style"的元素，那麼我們可以對其進行一些簡單的操作。

在控制檯可以向在其他普通的JavaScript環境中寫程式碼一樣。

上述程式碼可以獲取此元素，然後將其字型顏色設定為紅色，當然也可以進行其他dom操作。

上面只是進行一下簡單的程式碼演示，以達到舉一反三的效果。

谷歌控制檯畢竟是一個簡單的工具，沒有難度，多加使用任何人都可以熟練掌握，就和使用智慧手機一樣。

有任何問題，可以在文章底部留言，也歡迎參閱本版塊和其他版塊的前端文章，也歡迎提出有益的建議與意見。