一、怎么快速定位线上问题？
在工作之后，我们经常需要定位线上问题，但是本地又无法复现。
我将给小伙伴们介绍两种方法去定位：
方法一：使用$0.__vue__
步骤：
- 首先需要在“元素”中选中你要看的vue组件的最外层div，像我的这个组件最外层div是class为
refi-options的div，选中它；
image.png
image.png
- 然后在控制台中打出
$0.__vue__； - 这时就会打印出该组件中的一些数据信息（data、computed、methods都可以看到）；
image.png
image.png
- 还可以通过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就出现啦！（有时可能会有延迟，强刷下页面，或者重启下控制台就会出现啦）
三、如何重复发起某个请求：
想要触发一个请求还在傻傻的刷新页面？ 非也！在network中，选中自己想要重新发起的请求，右键，选择“重放XHR”，就可以再次触发啦！ 如图：
image.png
四、copy方法：
有时我们需要复制某些数据，但是又需要格式转化怎么办？ 在控制台中，先进行格式转化，然后直接调用copy方法，调用之后你要复制的数据就已经在剪切板了，直接粘贴就可以使用该数据啦
let object = {
a: "test"
}
copy(object)
//{a: "test"}
复制代码
以上就是我平时用到的一些debug小技巧，大家可以研究下chrome的官方开发者文档，里面还有很多有意思的小技巧，掌握它，会让我们的开发效率大大提高！
