這些按鈕的功能點如下：
通過js**或者命令列console.log()、console.warn()、console.error()可以將日誌資訊輸出到控制台
注：當需要換到下一行而不是回車的時候，請按shift+enter。
在上一小節，我們已經看到可以在控制台輸入js表示式點選enter即可得到表示式的值，當你在控制台輸入命令時，會彈出相應的智慧型提示框，你可以用tab自動完成當前的建議項
快捷方式
描述$()
返回與指定的css選擇器相匹配的第乙個元素，等同於document.queryselector()
$$()
返回與指定的css選擇器相匹配的所有元素的陣列，等同於document.queryselectorall()
$x()
返回與指定的xpath相匹配的所有元素的陣列
注：我在實際操作過程中發現$()並沒有按預期返回相匹配的第乙個元素，而是返回了所有匹配的元素陣列，我也給google提供了這個issue，等待google的答覆。
你可以在這個面板裡面除錯你的js**，也可以在工作區開啟你的本地檔案。
斷點可以在dom元素節點發生改變時、xhr生命週期狀態改變時、指定的事件執行時被觸發
①dom元素節點發生改變時
在elements面板中指定的dom節點上右擊，在彈出的選單中選擇break on...，可以看到三個選擇項，比如我們選擇subtree modifications，
那麼當選擇的節點裡面的子節點被新增、刪除、修改，則斷點就會被觸發。設定方式如下圖：
下圖是在我的系統裡新增指定省市指定醫院時由於增加了元素節點而觸發的斷點，通過單步除錯可以看到會彈出乙個div對話方塊供使用者新增資料。
②xhr生命週期狀態改變時
當xhr生命週期狀態發生改變或者xhr的url與sources面板右側的xhr breakpoints欄設定的字串匹配時，則斷點就會有觸發。
③指定的事件執行時
在sources面板右側的xhr breakpoints欄下面是event listener breakpoints,列出了各種型別的事件，勾選你要監聽的事件，
在指定的事件執行時，斷點就會有觸發。
**自
chrome 開發者工具詳解
google chrome一共提供了8大組工具 elements 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果 network 可以看到頁面向伺服器...
Chrome開發者工具 1
開啟chrome 開發者工具 主要面板介紹 chrome開發者工具主要有以下面板 console 控制台面板 在開發期間，可以使用控制台面板記錄診斷資訊，或者使用它作為 shell，在頁面上與j ascript互動。network 網路面板 從發起網頁頁面請求request後得到的各個請求資源資訊 ...
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...