前端Debug的小技巧

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

看完这篇文章，让你学会除了console.log以外的其他debug技巧~

一、怎么快速定位线上问题？

在工作之后，我们经常需要定位线上问题，但是本地又无法复现。

我将给小伙伴们介绍两种方法去定位：

方法一：使用$0.__vue__

步骤：

1. 首先需要在“元素”中选中你要看的vue组件的最外层div，像我的这个组件最外层div是class为refi-options的div，选中它；

2. 然后在控制台中打出$0.__vue__；
3. 这时就会打印出该组件中的一些数据信息（data、computed、methods都可以看到）；

4. 还可以通过fetch去触发一些函数。

方法二：线上环境开启vue devtool

除了上面的方法，还有一种更赞的就是把线上的vue devtool临时开启。

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}
复制代码

将这段代码复制到控制台执行，这样vue devtool就出现啦！（有时可能会有延迟，强刷下页面，或者重启下控制台就会出现啦）

二、debugger

可以在代码中打debugger

在代码中打一个断点，如图：

有了这个断点后，代码执行到这里会暂停。

可以在source中，点击代码添加debugger

大家可以详细看图中的使用方法~

三、如何重复发起某个请求：

想要触发一个请求还在傻傻的刷新页面？ 非也！在network中，选中自己想要重新发起的请求，右键，选择“重放XHR”，就可以再次触发啦！ 如图：

四、copy方法：

有时我们需要复制某些数据，但是又需要格式转化怎么办？ 在控制台中，先进行格式转化，然后直接调用copy方法，调用之后你要复制的数据就已经在剪切板了，直接粘贴就可以使用该数据啦

let object = {
    a: "test"
}
copy(object)
//{a: "test"}
复制代码

以上就是我平时用到的一些debug小技巧，大家可以研究下chrome的官方开发者文档，里面还有很多有意思的小技巧，掌握它，会让我们的开发效率大大提高！