使用Chrome DevTools有效調試Node.js

2020-12-17 智能甄選

本文介紹如何使用最新的Google Chrome DevTools高效地調試Node.js程序。請繼續閱讀,並閱讀關於Chrome DevTools的節點

調試是識別和消除軟體應用程式中的錯誤的任務,它不僅僅是在代碼中列印出值。本文介紹如何使用最新的Google Chrome DevTools高效地調試Node.js程序。

許多開發人員使用console.log來調試他們的應用程式。但為什麼?答案很簡單:如果你沒有正確設置你的環境,使用調試器很不方便。

為什麼console.log不是最好的選擇

使用console.log來調試你的代碼通常會讓你陷入停止你的應用程式的無限循環,添加一個console.log,並重新啟動你的應用程式。除了減慢應用程式的開發速度之外,它還會讓你的文字變得骯髒,並且會產生不必要的代碼。此外,嘗試在其他潛在日誌記錄操作的噪聲旁邊註銷變量時,可能會在嘗試查找正在調試的值時使調試變得困難。

調試工具為您提供了console.log無法提供的一些重要功能。特別是,它們允許您在代碼中的特定位置暫停執行應用程式,並在程序仍在運行時檢查並修改變量的值。

Node.js的內置調試器

Node.js附帶一個內置的調試工具。如果您在命令行上啟動應用程式,並且應用程式的起點node debug index.js,那麼它將以調試模式啟動。

這個命令有兩個作用:

您啟動一個交互式調試shell。然後在埠5858上打開一個TCP連接,您可以在其中連接遠程調試器與您的應用程式。

在使用console.log進行調試之後,CLI調試器是一個令人不舒服的解決方案。但是您有一組命令可以在運行時在應用程式中進行導航。

$ node debug index.js

高級調試

Chrome和Node.js與V8共享相同的JavaScript引擎,所以應該可以使用相同的工具來調試和分析應用程式。

對於舊版本的Node.js,有一個名為node-inspector的工具,它將Node的V8引擎與Chrome開發人員工具相連接。它不適用於當前的Node.js版本,但在2016年5月,該--inspect標誌著陸在Node.js中,並具有更好的調試支持。

與節點檢查器相比,您無需安裝任何附加模塊即可使--inspect標誌正常工作。你只需要用這個標誌開始你的應用程式。

$ node --inspect index.js

只要您啟動應用程式,Node.js會為您提供一個URL,您可以將其複製到Chrome瀏覽器的地址欄中。您的瀏覽器然後連接到您的Node.js實例,並讓您調試和配置您的應用程式。這包括設置斷點和觀看表達式或捕獲應用程式的內存快照。

使用Chrome開發人員工具調試Node.js應用程式

IDE調試(VS代碼)

目前大多數IDE支持Node.js應用程式的調試,如WebStorm,Eclipse或Visual Studio Code。

讓您的調試環境在Visual Studio代碼中啟動,這很簡單,順便說一下,這只是另一個Node.js應用程式。您只需點擊窗口左側的調試按鈕,然後選擇要調試的環境(Node.js)。

然後,Visual Studio代碼為您創建啟動配置並將其保存到.vscode/launch.json應用程式的根文件夾中的文件中。根據您的應用程式的起點,您必須在此進行調整。VS代碼預計你的應用程式開始於app.js。如果您以不同的方式命名起點,只需進入launch.json並更改程序鍵的值即可。之後,您可以啟動您的調試器並查看您的應用程式。

我們以一個簡單的Web伺服器為例。為了調試此應用程式,您必須設置一個斷點(通過單擊行號左側),啟動調試器,然後轉到本地瀏覽器中的伺服器URL。然後應用程式會自動停止在您的斷點處,您可以開始逐步完成代碼。

如您所見,不再需要console.log語句來調試您的應用程式代碼。只需啟動您選擇的調試器,並有一個舒適的界面來在運行時查看您的代碼。

相關焦點

  • Chrome Devtools 高級調試指南(新)
    3、截圖單個元素:> screen 選擇 Capture node screenhot2、DOM 斷點調試當你要調試特定元素的DOM中的更改時,可以使用此選項。這些是DOM更改斷點的類型:類似的,使用DevTools的工作區設置持久化,將本地的文件夾映射到網絡,在chrome開發者功能裡面對css 樣式的修改,都會直接改動本地文件,頁面重新加載,使用的資源也是本地資源,達到持久化的效果。
  • nodejs的調試debug
    要想運行上面的程序,我們需要執行node app.js。這會執行app.js但是並不會開啟調試功能。怎麼進行調試呢?我們需要加上 –inspect 參數:node --inspect app.js上面的代碼將會開啟nodejs的調試功能。
  • DevTools(Chrome 85)的新功能
    該事件記錄了 service worker fetch 事件處理運行 promise 所達成的時間(issue #1066579[1])在 Console settings 中,Group similar 現在適用於重複的消息,並且控制臺設置中的 Selected context only 設置現在仍然有效
  • Chrome 調試工具奇淫技 - OSCHINA - 中文開源技術交流社區
    所以對前端er來說,熟練掌握瀏覽器調試工具是性能優化的必備條件。首先我們得知道如何打開Chrome調試工具。你可以滑鼠右鍵,選擇審查元素(Inspect Element)或者使用快捷鍵(⌥⌘I)。SourcesSources就是所有資源了,你可以看到頁面加載的資源,圖片,css,js等,它們會按照資源的來源分類。Timeline跟前面的工具相比,Timeline就高級很多了。它可以讓你查看瀏覽器的渲染流程。解析代碼,布局,繪製,合併渲染層。
  • Chrome DevTools 全攻略!助力高效開發
    主要的解決方案是發送更少的字節(比如一張高質量的大圖可能幾 M 的大小,這時可以酌情優化一下圖片的寬高/清晰度)Sources 面板此章節請打開 justwe7.github.io/devtools/debug-js/get-started.html 一起食用主要用來調試頁面中的 JavaScript自定義代碼片段 Snippets我們經常有些 JavaScript
  • 如何使用Node.js上傳文件
    了解Filestack的架構當您使用Filestack的軟體即服務(SaaS)時,您將釋放出具有強大功能的龐大全球網絡。您正在跳過有效上傳,轉換,交付和智能的功能研究和開發。所有這一切都始於將您的內容(和/或用戶的內容)帶入該世界。您可以攜帶自己的存儲後端,如亞馬遜的S3存儲桶,或使用我們的默認存儲。
  • Node.JS快速入門
    ,在e盤創建文件夾nodedemo ,創建文本文件demo1.js,代碼內容我們在命令提示符下輸入命令node demo1.js ,結果如下:2.2 使用函數我們剛才的例子非常簡單,咱們這裡再看一下函數的使用:我們在命令提示符下輸入命令
  • 乾貨 | 前端調試各種收集—斷點篇
    在Chrome和VS Code中調試Vue.js:此方法出處。這種方式使用VSCode的「Debugger for Chrome」擴展,推薦。感覺就是上面的第一種方式,只不過將源碼映射到本地源碼,並在編輯器上顯示。
  • 【 Node.js】你應該知道的 NPM 知識都在這!
    但是 npm 本身對兩個腳本提供了默認值,這兩個腳本不用在 script 屬性中定義,可以直接使用"start": "node server.js""install": "node-gyp rebuild"npm run start 的默認值是 node server.js ,前提是根目錄下有 server.js
  • 你不知道的 Npm(Node.js 進階必備好文)
    但是 npm 本身對兩個腳本提供了默認值,這兩個腳本不用在 script 屬性中定義,可以直接使用"start": "node server.js""install": "node-gyp rebuild"npm run start 的默認值是 node server.js ,前提是根目錄下有 server.js
  • 【 Node.js 進階】你應該知道的 NPM 知識都在這!
    但是 npm 本身對兩個腳本提供了默認值,這兩個腳本不用在 script 屬性中定義,可以直接使用"start": "node server.js""install": "node-gyp rebuild"npm run start 的默認值是 node server.js ,前提是根目錄下有 server.js
  • 全程指導:Node JS實戰之製作塗鴉遊戲
    curl http://npmjs.org/install.sh | sh  在安裝完畢node.js後,我們需要安裝node.js中的模塊包,因為在程序中我們要用到網絡相關的一系列功能,而幸運的是,node.js都幫我們封裝了大量而豐富的相關的各種函數和方法
  • PerDev 1.2 發布,for Per.js 2.5+ 版本的官方調試插件
    PerDev 1.2 今天發布了,它是用來調試2.5+版本的Per.js的Chrome內核瀏覽器插件。
  • 找回 Node.js 裡面那些遺失的 ES6 特性
    在 Node.js 使用的 JS 引擎 V8 裡面將不同狀態 ES6 特性分成了 3 個等級:『shipping』 已經開啟的 ES6 特性本文使用的 Node.js 版本號:穩定版本:4.2.4對應 V8 引擎的版本:4.5.103.35最新版本:5.3.0對應 V8 引擎版本:4.6.85.31
  • node.js、MongoDB下一代的LAMP
    node.js、MongoDB下一代的LAMP 我們大部分人在做網站時,都用的是LAMP,殊不知LAMP已成過去式,新一代的小生:nix、node.js、MongoDB誕生了,讓我們走進他們,知道他們的故事!
  • 一些小眾卻有用的 Node.js 包
    node index.js -x 3,會看到如下消息:Usage: index.js -x [num] -y [num]  Options:   -x                                   [required]   -y                                   [required]  Missing required argument
  • 強網杯2020-GooExec chrome pwn分析及兩種利用思路
    /chrome --js-flags=--noexpose_wasm --no-sandbox--js-flags=--noexpose_wasm 用於關閉wasm,意味著不能使用wasm來填寫shellcode進行利用,但可以通過漏洞利用一進行繞過--no-sandbox 關閉沙箱題目下載地址:https://github.com
  • nodejs 中文分詞模塊 node-segment
    github:https://github.com/leizongmin/node-segment 在線演示地址:http://segment.ucdok.com/ 本分詞模塊具有以下特點: 1、使用方法 安裝:$ npm install segment --save 使用:
  • Node.js原型鏈汙染的利用
    0x02 搭建調試環境通常在ctf中原型鏈汙染的題目都會直接給出源碼,並且源碼通常都比較長,直接去看並不能很好的理解代碼,所以需要本地搭建一個環境來方便我們本地嘗試以及動態調試。這裡以Code-Breaking 2018的Thejs這一題為例。下載node.js:這個就不多解釋了直接去官網下載並安裝就可以了。
  • centos7編程實踐:安裝nodejs
    2、node.js的優勢2.1、Nodejs語法完全是js語法,只要你懂js基礎就可以學會Nodejs後端開發Node打破了過去JavaScript只能在瀏覽器中運行的局面。NodeJs不為每個客戶連接創建一個新的線程,而僅僅使用一個線程。當有用戶連接了,就觸發一個內部事件,通過非阻塞I/O、事件驅動機制,讓Node.js程序宏觀上也是並行的。使用Node.js,一個8GB內存的伺服器,可以同時處理超過4萬用戶的連接。