一五嫂、怎么快速定位線上問題房官？
在工作之后，我們經(jīng)常需要定位線上問題朽缎，但是本地又無法復(fù)現(xiàn)惨远。
我將給小伙伴們介紹兩種方法去定位：
方法一：使用$0.__vue__
步驟：
- 首先需要在“元素”中選中你要看的vue組件的最外層div，像我的這個(gè)組件最外層div是class為
refi-options的div话肖，選中它北秽；
image.png
image.png
- 然后在控制臺中打出
$0.__vue__； - 這時(shí)就會打印出該組件中的一些數(shù)據(jù)信息（data最筒、computed贺氓、methods都可以看到）；
image.png
image.png
- 還可以通過fetch去觸發(fā)一些函數(shù)床蜘。
方法二：線上環(huán)境開啟vue devtool
除了上面的方法辙培，還有一種更贊的就是把線上的vue devtool臨時(shí)開啟。
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;
}
}
復(fù)制代碼
將這段代碼復(fù)制到控制臺執(zhí)行悄泥，這樣vue devtool就出現(xiàn)啦Ｂ捕场（有時(shí)可能會有延遲，強(qiáng)刷下頁面弹囚，或者重啟下控制臺就會出現(xiàn)啦）
三、如何重復(fù)發(fā)起某個(gè)請求：
想要觸發(fā)一個(gè)請求還在傻傻的刷新頁面领曼？ 非也鸥鹉！在network中，選中自己想要重新發(fā)起的請求庶骄，右鍵毁渗，選擇“重放XHR”，就可以再次觸發(fā)啦单刁！ 如圖：
image.png
四灸异、copy方法：
有時(shí)我們需要復(fù)制某些數(shù)據(jù)，但是又需要格式轉(zhuǎn)化怎么辦？ 在控制臺中肺樟，先進(jìn)行格式轉(zhuǎn)化檐春，然后直接調(diào)用copy方法，調(diào)用之后你要復(fù)制的數(shù)據(jù)就已經(jīng)在剪切板了么伯，直接粘貼就可以使用該數(shù)據(jù)啦
let object = {
a: "test"
}
copy(object)
//{a: "test"}
復(fù)制代碼
以上就是我平時(shí)用到的一些debug小技巧疟暖，大家可以研究下chrome的官方開發(fā)者文檔，里面還有很多有意思的小技巧田柔，掌握它俐巴，會讓我們的開發(fā)效率大大提高！
