デバッグを開始するF12
1.右ロードボタンコードの更新がタイムリーに反映されていない、時々ブラウザのキャッシュがあり、キャッシュをクリアして再ロードすることができます。
2.performance mointerビューリアルタイム・パフォーマンス
最後に3個のドットをクリックして、より多くのツール - >パフォーマンスmointerを選択
パフォーマンスモニタは、いつでも、現在のページのCPU使用率は、メモリを取る、というように、だけでなく、使用条件の変化を見ることができ、急激に変化するとの通知を取ると確信して見ることができます。実際には、これだけは、私の状況は、子ノードがOOMを引き起こす横断するダウン保たれている、あなたはコールスタックにそれを見ることができ、メモリオーバーフローデバッガは、上記のコードの行で停止したときに、問題を見ることができるようになり、私は問題を置きますコードのコメントは、メモリはこのコードがメモリリークを持っていることを、その後、急に怒っ増加しないことがわかりました。
3.より詳細な情報は、パフォーマンスを記録することができます
パフォーマンスパネル解決パフォーマンスのボトルネックにChromeデベロッパーツールを使用します
クロムデベロッパーツールは、詳細な--Performanceを使用しています
私は、スクリプトをデバッグするためのより多くの心配、これはコードに主に関連しているので、問題は大きいかもしれません。
JSは、バックエンド処理は、WebGLのモデルであり、Iは、フロントエンドとバックエンドの例をデバッグする、フロントフレームは、治療のVUE、VUEネストされたページの3Dモデルでは、2ページネスティングです。実行モデルだけでは負荷が崩壊しないだろう、プラスVUEは崩壊します。だから我々は、実行の違いが何であるかを最終的に二つの方法を比較する必要があります。モデルがロードされているタイムラインの前半では、ロード・スクリプトのVUE VUEリフレッシュモデルデータの使用の後ろに表示され、モデルはよく表示される画面上にロードされている、あなたは上のパネルに表示されるコンテンツの実行時間を見ることができ、位置を参照してください①、それはこの時点で位置決めすることができます。
選択した以下の主な分野は、それらのものと秩序を呼び出す見ることができます。
次の図は、①選択した範囲は、②で選択した範囲の内容の間に表示されます表し、あなたは時間のかかるエントリを懸念し、あなたが三角形②部門の時点で結果を並べ替えることができ、③の対応するスクリプトファイルを見ることができます
統計パネルは分野に集中することです
-
Summary
チャート：イベント時間がかかるの様々な段階を示しています色英語中国語
ブルーロードのロード
黄色 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.点击网页元素右键检查
检查元素的长和宽，在控件显示不对的时候首先就这样验证长宽是否符合预期，尤其是在嵌套的时候。