Visual Studio Kodunda Node.js Uygulamalarında Hata Ayıklama

Node.js uygulamanızda Visual Studio Code'da hata ayıklamak mümkün ve basittir. VS Code düzenleyicisi, Node.js çalışma zamanını hedefleyen herhangi bir uygulamada hata ayıklayabilen yerleşik bir hata ayıklayıcı ile birlikte gelir. Bu, JavaScript'te veya onu derleyen herhangi bir dilde (ör. TypeScript) hata ayıklayabileceğiniz anlamına gelir.

Bu makale, VS Code'da Node.js uygulamanızda hata ayıklama adımlarında size yol gösterecektir. Kaynak haritaları kullanarak bir hata ayıklama oturumu başlatmayı, kesme noktaları eklemeyi, harici bir işlem eklemeyi ve TypeScript kodunda hata ayıklamayı öğreneceksiniz.

Başlamak için Neye İhtiyacınız Var?

Başlamadan önce yerel makinenize hem Node.js'yi hem de VS Code'u yükleyin. Node.js'nin en son sürümü şu adreste mevcuttur: Node.js resmi internet sitesi. Benzer şekilde, Visual Studio Code için en son sürümü şu adresten indirin:

VS Kodu İnternet sitesi. hakkındaki talimatlar için Windows'ta VS Kodu nasıl kurulur, kurulum kılavuzumuzu okuyun.

Ayrıca bir Node.js projesine de ihtiyacınız var. Sıfırdan basit bir Node.js uygulaması oluşturabilirsiniz veya mevcut bir uygulamayı kullanın.

VS Kodunda Hata Ayıklama Süreci

VS Code düzenleyicisinde bir hata ayıklama oturumu başlatmak oldukça basittir. Dosyayı VS Code ile açın ve tıklayın Çalıştır ve Hata Ayıkla kenar çubuğundaki simgeye (veya Ctrl + Üst Karakter + D klavyenizde). Ardından, Çalıştır ve Hata Ayıkla işlemini başlatmak için düğmesine basın.

Varsayılan olarak Node.js, projenizin hata ayıklama ortamını bulmaya çalışacaktır. Ancak otomatik algılama başarısız olursa, doğru ortamı seçmenizi ister. Bu eğitim için bu ortam Node.js'dir.

Ortamı seçtikten sonra, VS Code hata ayıklayıcıyı etkinleştirir ve onu işleme ekler. Çıktınızı şurada görebilirsiniz: HATA AYIKLAMA KONSOLU. En üstteki hata ayıklama araç çubuğunu kullanarak kodu yineleyebilir, yürütmeyi duraklatabilir veya oturumu sonlandırabilirsiniz.

Ayrıca bir yapılandırma dosyası oluşturma seçeneğiniz de vardır. bu lansman.json dosyası, hata ayıklama ayrıntılarını yapılandırmanıza ve ayarlamanıza olanak tanır. Komut dosyanız bir bağımsız değişken gerektiriyorsa, bu bağımsız değişkenleri lansman.json dosya. Her yapılandırmada birden çok seçenek ayarlanabilir:

{ 
"sürüm": "0.2.0", 
"yapılandırmalar": [ 
 { "tip": "düğüm", 
"rica etmek": "öğle yemeği", 
"isim": "Programı Başlat", 
"Dosyaları atla": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Ayrıca düzenleyicinin sol tarafında beş panel göreceksiniz. Bu paneller DEĞİŞKENLER, KOL SAATİ, ÇAĞRI YIĞINI, YÜKLENEN Scriptler, Ve KIRILMA NOKTALARI:

Konfigürasyonu kurmayı tamamladığınızda, konfigürasyon menüsünden programı seçin ve çalıştırın.

Harici İşlem Ekleme

Node.js hata ayıklama oturumu kurmanın başka bir yöntemi de harici bir işlem eklemektir. Programı aşağıdaki komutla başlatın:

düğüm --inceleme index.js

ekle -brk sonra bayrak --incelemek program çalışmaya başlamadan önce eklemek isterseniz.

Ardından, işlem seçiciyi VS Code'da açın. Bu, Node.js ortamında bulunan tüm işlemleri listeler. Seçiciyi açmak için tuşuna basın. Ctrl + Üst Karakter + P ve bul Hata Ayıklama: Node.js komutuna ekle.

Komuta tıklayın ve hata ayıklama işlemini başlatmak için doğru seçeneği seçin.

Kesme noktası oluşturma

Kodu incelemek için programınızdaki belirli noktalarda duraklamak istiyorsanız, burada kesme noktaları ayarlayın. Kesme noktalarını kodunuzun hemen hemen her yerinde ayarlayabilirsiniz. Bu, değişken bildirimlerini, ifadeleri ve yorumları içerir. Ancak işlev bildirimlerinde kesme noktaları ayarlayamazsınız.

Bir kesme noktası oluşturmak oldukça basittir. Farenizi satır numaralarının soluna getirdiğinizde her satırda kırmızı bir daire belirir. Kesme noktasını eklemek istediğiniz kodunuzda satır numarasını belirleyin. Ardından, kesme noktasını eklemek için o satıra tıklayın:

İçinde KIRILMA NOKTALARI bölmesinde, projenizde etkinleştirilen tüm kesme noktalarını bulacaksınız. Kesme noktalarını yöneteceğiniz, düzenleyeceğiniz ve devre dışı bırakacağınız yer burasıdır. Ayrıca, bir istisna oluştuğunda veya yakalanmamış istisna durumlarında da kodu durdurabilirsiniz. Bu, işlemden çıkmadan önce sorunu incelemenizi sağlar.

Kesme noktalarını iş başında görelim. Tıkla Öğle yemeği hata ayıklama oturumunu başlatmak için simge. Program ilk kesme noktasında duracak ve inceleme için değeri verecektir:

tıklayabilirsiniz Devam etmek simgesini (veya F5'e basarak) programı bir sonraki kesme noktasına taşıyın. Bu, programın sonuna gelene kadar devam eder.

TypeScript'te Kaynak Eşlemelerle Hata Ayıklama

TypeScript daha popüler olmaya devam ettikçe, TypeScript'te yazılan Node.js projelerinin miktarı da artacaktır. Neyse ki VS Code ile TypeScript tabanlı projelerde de hata ayıklayabilirsiniz.

İlk önce bir oluştur tsconfig.json projenizin kök dizininde dosya oluşturun (henüz oluşturulmadıysa) ve kaynak haritaları etkinleştirin:

{ "derleyici Seçenekleri": { "kaynak Haritalar": doğru }}

Ardından, çalışan işlemi ekleyin ve kesme noktalarını TypeScript dosyanıza ayarlayın. Visual Studio Code, kaynak haritaları bulur ve kullanır.

VS Code'a kaynak haritaları nerede bulacağını açıkça söyleyebilirsin. Bunu yapmak için bir outfiles başlatma yapılandırma dosyanızdaki özniteliği seçin ve onu kaynak haritalarınızın tam konumuna yönlendirin:

{ 
"sürüm": "0.2.0", 
"yapılandırmalar": [ { 
"tip": "düğüm", 
"rica etmek": "öğle yemeği", 
"isim": "Programı Başlat", 
"Dosyaları atla": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outfiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

kullanıyorsanız ts düğümü projenizi derleme adımı olmadan çalıştırmak için yukarıdaki yapılandırma yerine bunu kullanın:

{ 
"sürüm": "0.2.0", 
"yapılandırmalar": [ { 
"tip": "pwa düğümü", 
"rica etmek": "öğle yemeği", 
"isim": "Sunucuyu Başlat", 
"Dosyaları atla": [ "/**" ], 
"runtimeArgs": [ "-R", "ts düğümü/kayıt" ], 
"argo": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Program özniteliği olmadığı için çalışma zamanı argümanlar kayıtlar ts düğümü TypeScript dosyaları için işleyici olarak. İlk argüman argümanlar programın giriş dosyasıdır. Artık hata ayıklama oturumunuzu başlatabilirsiniz. Normal JavaScript veya bir ön uç çerçevesi ile geliştiriyorsanız, şunları da yapabilirsiniz: tarayıcıda JavaScript kodunda hata ayıklayın.

Visual Studio Kodundaki Diğer Özellikler

Visual Studio Code, harika özelliklerle dolu güçlü bir kaynak kodu düzenleyicisidir. VS Code'un yerleşik hata ayıklayıcı aracını ele aldık. Ayrıca, Node.js uygulamanızda hata ayıklamak için onu nasıl kullanabileceğinizi de gösterdik.

Ancak VS Code'da başka pek çok kullanışlı özellik vardır. Bazılarına aşina olsanız da, bazıları sizin için tamamen yeni olabilir. Bu durumda, bu özellikler ve bunların nasıl kullanılacağı hakkında bilgi edinmek ilginizi çekebilir.