亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Visual Studio Code 斷點(diǎn)調(diào)試 Vue

qpwoeiru96 / 1133人閱讀

摘要：個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置和來(lái)完成直接在斷點(diǎn)調(diào)試代碼并且在的調(diào)試窗口看到中相同的值?，F(xiàn)在就可以在文件的代碼中打斷點(diǎn)進(jìn)行調(diào)試了。

很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼， 或者直接使用 console.log 來(lái)觀察變量值， 這是非常痛苦的一件事，需要同時(shí)打開(kāi)至少 3 個(gè)窗體。個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來(lái)完成直接在 VS Code 斷點(diǎn)調(diào)試代碼, 并且在VS Code的調(diào)試窗口看到Chrome中console相同的值。
設(shè)置 Chrome 遠(yuǎn)程調(diào)試端口

首先我們需要在遠(yuǎn)程調(diào)試打開(kāi)的狀態(tài)下啟動(dòng) Chrome, 這樣 VS Code 才能 attach 到 Chrome 上:

Windows

右鍵點(diǎn)擊 Chrome 的快捷方式圖標(biāo)，選擇屬性

在目標(biāo)一欄，最后加上--remote-debugging-port=9222 注意要用空格隔開(kāi)

macOS

打開(kāi)控制臺(tái)執(zhí)行：

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

Linux

打開(kāi)控制臺(tái)執(zhí)行：

google-chrome --remote-debugging-port=9222

Visual Stuido Code 安裝插件

點(diǎn)擊 Visual Studio Code 左側(cè)邊欄的擴(kuò)展按鈕， 然后在搜索框輸入Debugger for Chrome并安裝插件，再輸入，安裝完成后點(diǎn)擊 reload 重啟 VS Code

添加 Visual Studio Code 配置

點(diǎn)擊 Visual Studio Code 左側(cè)邊欄的 調(diào)試 按鈕， 在彈出的調(diào)試配置窗口中點(diǎn)擊 設(shè)置 小齒輪， 然后選擇 chrome, VS Code 將會(huì)在工作區(qū)根目錄生成.vscode 目錄，里面會(huì)有一個(gè) lanch.json 文件并會(huì)自動(dòng)打開(kāi)

用下面的配置文件覆蓋自動(dòng)生成的 lanch.json 文件內(nèi)容。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:8080/#/",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

修改 webpack 的 sourcemap

如果你是基于 webpack 打包的 vue 項(xiàng)目， 可能會(huì)存在斷點(diǎn)不匹配的問(wèn)題, 還需要做些修改：

打開(kāi)根目錄下的 config 目錄下的 index.js 文件

將dev 節(jié)點(diǎn)下的 devtool 值改為 "eval-source-map"

將dev節(jié)點(diǎn)下的 cacheBusting 值改為 false

開(kāi)始調(diào)試吧

一切具備了， 現(xiàn)在驗(yàn)收成果了

通過(guò)第一步的方式以遠(yuǎn)程調(diào)試打開(kāi)的方式打開(kāi) Chrome

在 vue 項(xiàng)目中執(zhí)行npm run dev以調(diào)試方式啟動(dòng)項(xiàng)目

點(diǎn)擊 VS Code 左側(cè)邊欄的調(diào)試按鈕，選擇 Attach to Chrome 并點(diǎn)擊綠色開(kāi)始按鈕，正常情況下就會(huì)出現(xiàn)調(diào)試控制條。

現(xiàn)在就可以在.vue文件的js代碼中打斷點(diǎn)進(jìn)行調(diào)試了。

前往我的技術(shù)小站 https://www.bbwho.com 查看更多博客。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92931.html

相關(guān)文章

  • 使用Visual Studio Code對(duì)Node.js進(jìn)行斷點(diǎn)調(diào)試

    摘要：在開(kāi)發(fā)的過(guò)程中，幾乎不可能一次性就能寫(xiě)出毫無(wú)破綻的程序，斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。作為前端開(kāi)發(fā)工程師，以往我們開(kāi)發(fā)的程序都運(yùn)行在瀏覽器端，利用提供的開(kāi)發(fā)者工具就可以方便的進(jìn)行源碼斷點(diǎn)調(diào)試。這幾個(gè)都是常見(jiàn)的斷點(diǎn)調(diào)試指令。 在開(kāi)發(fā)的過(guò)程中，幾乎不可能一次性就能寫(xiě)出毫無(wú)破綻的程序，斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。 作為前端開(kāi)發(fā)工程師，以往我們開(kāi)發(fā)的JavaScript程序都運(yùn)行在瀏覽器端，...

    gityuan 評(píng)論0 收藏0

  • Visual Studio Code前端開(kāi)發(fā)使用之旅

    摘要：更好的斷點(diǎn)控制啟用禁用重新啟用可以在調(diào)試視圖中的斷點(diǎn)區(qū)域設(shè)置。編輯器邊距中的斷點(diǎn)一般用紅色的實(shí)心圓表示。前端開(kāi)發(fā)必備插件功能性插件匹配標(biāo)簽，關(guān)閉對(duì)應(yīng)的標(biāo)簽。這可以使得團(tuán)隊(duì)內(nèi)的書(shū)寫(xiě)更為規(guī)范且具有一致性。 Visual Studio Code是個(gè)現(xiàn)下比較流行的編輯器，啟動(dòng)非常快，完全可以用來(lái)代替其他文本文件編輯工具。又可以用來(lái)做開(kāi)發(fā)，支持各種語(yǔ)言，相比其他IDE，輕量級(jí)完全可配置還集成Gi...

    stormjun 評(píng)論0 收藏0

  • Visual Studio Code 前端調(diào)試不完全指南

    摘要：接下來(lái)的內(nèi)容將從以下幾方面進(jìn)行展開(kāi)調(diào)試前端代碼調(diào)試通過(guò)啟動(dòng)的服務(wù)器要使用的調(diào)試功能，首先就得配置文件。調(diào)試前端代碼通過(guò)調(diào)試前端代碼主要依賴于一個(gè)插件，該插件主要利用所開(kāi)放出來(lái)的接口來(lái)實(shí)現(xiàn)對(duì)其渲染的頁(yè)面進(jìn)行調(diào)試。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 Visual Studio Code (以下簡(jiǎn)稱 vscode) 如今已經(jīng)代替 Sublime，成為前端工程師們最喜愛(ài)的代碼編輯器。它作為...

    dongfangyiyu 評(píng)論0 收藏0

  • 使用Visual Studio Code編寫(xiě)調(diào)試Python Flask程序

    摘要：最近由于工作關(guān)系，開(kāi)始寫(xiě)程序，同事有用的，有用的。第一種適合及以上版本，因?yàn)樵诎姹酒穑霈F(xiàn)了文件，配置可以寫(xiě)成用文件啟動(dòng)程序，實(shí)測(cè)可以觸發(fā)斷點(diǎn)。 最近由于工作關(guān)系，開(kāi)始寫(xiě)flask web程序，同事有用Vim的，有用PyCharm的。在調(diào)研了一通python的編輯器，IDE之后，發(fā)現(xiàn)Visual Studio Code相對(duì)比較適合我。 VSC有相對(duì)較全的功能，比較好看舒服的主題，良好的...

    gotham 評(píng)論0 收藏0

  • Visual Studio Code調(diào)試PHP

    摘要：和，這兩個(gè)配置文檔中說(shuō)的是設(shè)置為。主要感慨就是，文檔一定要找到官方文檔，然后提高英語(yǔ)閱讀水平，隨后再加上多多嘗試即可。 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/remote/1460000019475554?w=443&h=253); 這兩天有點(diǎn)時(shí)間，花時(shí)間學(xué)習(xí)了一下PHP基礎(chǔ)語(yǔ)法和語(yǔ)句。因?yàn)閭€(gè)人比較喜歡Vis...

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<