手把手教你如何在生產環境檢查 Vue 應用程序

做者：Damian Mullins,
譯者：前端小智
來源：damimullins

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

在開發環境中，Vue devtools 是頗有用。 可是，一旦部署到生產環境，它就再也不能夠訪問咱們所編寫的代碼。 那麼發佈到生產環境時，咱們要怎麼檢查應用程序呢？ 在這篇文章中，咱們會介紹一些技巧，用來檢查和調試咱們的代碼。

觸發 Prop 值並更新

除了弄清楚如何檢查Vue內部變量外，咱們還嘗試更新組件屬性值。

假設咱們有一個組件，該組件的prop控制着一個元素的文本，那麼咱們如何強制改變該值以觸發UI更新呢？

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
};
</script>

找到 Vue 組件實例

首先，咱們須要使用Chrome devtools elements面板找到組件的頂級元素。 在本例中，元素是h1:

使用$0命令

一旦咱們選擇了元素，就能夠在控制檯中輸入$0,$0表示最後選擇的元素。$1是以前選擇的元素,依此類推.它記得最後五個元素$0 – $4.

要查看Vue實例的詳細信息，可使用 $0.__vue__。

使用document.querySelector方法

咱們還可使用任何DOM查找方法（例如querySelector或getElementById等）來選擇元素。這裏咱們將使用document.querySelector來查看 Vue 實例：

document.querySelector('[data-v-763db97b]').__vue__

這裏咱們使用經過data 屬性查找元素，可是你能夠在querySelector中使用任何有效的CSS選擇器。

鎖定 prop 值

有了Vue組件實例的引用，咱們就能夠在控制檯中展開它，看看裏面有什麼內容：

仔細看，在中間看到msg prop，單擊三個點，就會看到當前值。

咱們能夠在控制檯中使用下面命令查看prop值：

// Using $0
$0.__vue__.msg

// Using querySelector
document.querySelector('[data-v-763db97b]').__vue__.msg

更新 prop 值

如今，更新prop值就是將變量從新賦值給它。所以，能夠在控制檯上這麼作：

$0.__vue__.msg = 'Hello from the updated value!'

瞧，UI更新啦！

總結

在本文中，咱們使用了Chrome devtools控制檯來定位元素並檢查相關的Vue組件實例詳細信息，並操縱Vue實例對象以更新prop值。

須要注意的一件事是，更新不只限於字符串值，還能夠更新任何其餘類型的屬性，例如布爾值和數字。

當前這種更新方式也有侷限性，例如沒法更新計算的、屬性，由於它們沒有setter。 可是，可以檢查分配給生產中組件的值仍然很是有用。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.damimullins.com/i...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。