F12啟動調試
1.右鍵加載按鈕可以清空緩存並重新加載，有時候瀏覽器有緩存，代碼更新不會及時反映出來。
2.performance mointer實時查看performance
點擊三個豎着的小點，選擇more tools->performance mointer
performance monitor可以隨時看當前頁面的cpu使用率還有占用內存等等，同時還可以看使用率的變化情況，變化突然變大肯定就要關注了。其實只用這個就能發現問題了，內存溢出時調試器會停在一行代碼上面，你可以看它的調用棧，我的情況是不停的往下遍歷子節點導致oom，我把出問題的代碼注釋，發現內存不會突然瘋狂增加，那么就說明這句代碼有內存泄漏。
3.更加詳細的信息可以用performance進行記錄
使用chrome開發者工具中的performance面板解決性能瓶頸
chrome devtools使用詳解——Performance
在調試中我比較關注scripting，因為這塊主要和代碼相關，出問題的可能大.
我調試的例子的后端和前端都是js，后端是webgl模型處理，前端是vue框架，vue嵌套了3d模型處理的頁面，所以是兩個頁面嵌套。單獨執行模型加載不會崩潰，加上vue就會崩潰。所以需要對比兩種方式在執行中到底有什么不同。在時間軸的前半段都是模型加載的，后面會出現vue利用加載模型刷新vue數據的script，在屏幕上模型加載好了就會顯示出來，在面板上面可以看執行當時的顯示內容，位置見①，因此可通過這個時間點來定位。
main的下面可以看選中的區域中調用了那些東西和順序。
下圖中，①表示選中的區間，在②會顯示選中區間的執行內容，在③可以看script對應的文件，在②處點三角可以對結果進行排序，關注耗時長的條目
統計面板是重點關注區域
-
Summary
統計圖：展示各個事件階段耗費的時間顏色 英文 中文
藍色 Loading 加載
黃色 Scripting 腳本
紫色 Rendering 渲染
綠色 Painting 繪制
深灰 Other 其他
白色 空閑
-
Bottom-Up
排序：可以看到各個事件消耗時間排序
(1)self-time指除去子事件這個事件本身消耗的時間
(2)total-time這個事件從開始到結束消耗的時間（包含子事件） -
Call Tree
調用棧：Main選擇一個事件，可以看到整個事件的調用棧（從最頂層到最底層，而不是只有當前事件） -
Event Log
事件日志
(1) 多了個start time，指事件在多少毫秒開始觸發的
(2) 右邊有事件描述信息
我的問題可以明確是代碼問題，所以我只看scripting。
值得注意的是，這里的Group面板非常有用。我們可以很清晰明了得分析按照活動，目錄，域，子域，URL和Frame進行分組的前端性能。對於開發非常有幫助。在這里我有兩個域，所以也用了這個方法。
4.memory查看內存
chrome內存泄露（一）、內存泄漏分析工具
1.打開控制台上的Memory面板。
2.選擇堆快照類型。我一般是使用前兩種：Heap snapshot（JS堆快照）和Allocation instrumentation on timeline（JS堆分配時間線）。
3.開始錄制前先點擊下垃圾回收-->點擊開始錄制。如果JS堆內存動態分配時間線，結束之前要再點擊下垃圾回收，再結束錄制
select js vm instance可以在有多線程的時候用，可以選擇具體的進程記錄內容
這里我只對比了下發現加了vue后jsarray等等數量多了幾倍，但怎么用於調優完全不會
4.chrome安裝vuejs devtools
確定項目是vue項目, 打開f12, 選擇vue就可以使用了.
vue是數據驅動的, 這樣就能看到對應數據了,對性能調優沒什么用。。比較適合業務調試，看數據是不是正確
5.點擊網頁元素右鍵檢查
檢查元素的長和寬，在控件顯示不對的時候首先就這樣驗證長寬是否符合預期，尤其是在嵌套的時候。