F12 to start debugging
1. Right-load button can clear the cache and reload, sometimes there are browser cache, code updates are not timely reflected.
2.performance mointer view real-time performance
Click the three dots on end, select more tools-> performance mointer
performance monitor can see at any time the current page cpu usage also take up memory, and so on, but also can see the changes in usage conditions, changes abruptly is sure to take notice. In fact, only this will be able to see the problem, when memory overflow debugger stops at the line of code above, you can see it in the call stack, my situation is kept down to traverse the child nodes cause oom, I put the problem code comments, found that memory will not increase suddenly mad, then that this code has a memory leak.
3. More detailed information can be recorded with performance
Use chrome developer tools in the performance panel resolve performance bottlenecks
chrome devtools uses detailed --Performance
I am more concerned for debugging scripting, and because this is mainly related to the code, the problem may be large.
I debugging example of front-end and back-end are js, back-end processing is webgl model, the front frame is vue, vue nested page 3d model of treatment, it is two pages nesting. Execution model alone will not collapse load, plus vue will collapse. So we need to compare two ways in the end what is the difference in execution. In the first half of the timeline models are loaded, will appear behind the use of load script vue vue refresh model data, the model is loaded on the screen will be displayed Well, you can see the execution time of the content displayed in the panel above, see position ①, it can be positioned by this point in time.
You can see the following main areas selected call those things and order.
The following figure, ① represents the selected range will be shown during the contents of the selected range in ②, you can see the corresponding script file in ③, you can sort the results at the point of the triangle ② Department, concerned about time-consuming entry
Statistics panel is to focus on areas
-
Summary
Chart: shows the various stages of the event time-consumingColor English Chinese
Blue Loading 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.点击网页元素右键检查
检查元素的长和宽，在控件显示不对的时候首先就这样验证长宽是否符合预期，尤其是在嵌套的时候。