Visual Studio'da JavaScript veya TypeScript uygulamasında hata ayıklama

Visual Studio'yu kullanarak JavaScript ve TypeScript kodunda hata ayıklayabilirsiniz. Kesme noktalarına isabet edebilir, hata ayıklayıcıyı ekleyebilir, değişkenleri inceleyebilir, çağrı yığınını görüntüleyebilir ve diğer hata ayıklama özelliklerini kullanabilirsiniz.

Sunucu tarafı betiğinde hata ayıklama

1. Projeniz Visual Studio'da açıkken bir sunucu tarafı JavaScript dosyası (server.js gibi) açın, kesme noktası ayarlamak için cilt payı'na tıklayın:

   

   Kesme noktaları, güvenilir hata ayıklama işleminin en temel ve önemli özelliğidir. Kesme noktası Visual Studio'nun çalışan kodunuzu nerede askıya alması gerektiğini gösterir; böylece değişkenlerin değerlerine veya belleğin davranışına ya da bir kod dalının çalıştırılıp çalıştırılmadığına bakabilirsiniz.

2. Uygulamanızı çalıştırmak için F5 tuşuna basın (Hata AyıklamaYı>Başlat Hata Ayıklama).

   Hata ayıklayıcı ayarladığınız kesme noktasında duraklatılır (IDE, deyimi sarı arka planda vurgular). Artık, Yerel Ayarlar ve İzleme pencereleri gibi hata ayıklayıcı pencerelerini kullanarak kapsam dahilindeki değişkenlerin üzerine gelerek uygulama durumunuzu inceleyebilirsiniz.

   

3. Uygulamaya devam etmek için F5 tuşuna basın.

4. Chrome Geliştirici Araçları'nı kullanmak istiyorsanız Chrome tarayıcısında F12 tuşuna basın. Bu araçları kullanarak DOM'u inceleyebilir veya JavaScript Konsolunu kullanarak uygulamayla etkileşim kurabilirsiniz.

İstemci tarafı betiğinde hata ayıklama

Visual Studio yalnızca Chrome ve Microsoft Edge (Chromium) için istemci tarafı hata ayıklama desteği sağlar. Bazı senaryolarda, hata ayıklayıcısı JavaScript ve TypeScript kodlarındaki kesme noktalarına ve HTML dosyalarındaki ekli betiklere otomatik olarak isabet eder.

• ASP.NET uygulamalarında istemci tarafı betiğinde hata ayıklamak için Araçlar>Seçenekler>Hata Ayıklama'yı ve ardından ASP.NET için JavaScript Hata Ayıklamayı Etkinleştir'i (Chrome, Edge ve IE) seçin.

  Daha ayrıntılı bilgi için Microsoft Edge'de JavaScript hatalarını ayıklama blog gönderisine ve Google Chrome için bu gönderiye bakın. ASP.NET Core'da TypeScript'te hata ayıklamak için bkz . Mevcut ASP.NET Core uygulamasına TypeScript ekleme.

• Node.js uygulamalar ve diğer JavaScript projeleri için burada açıklanan adımları izleyin.

Uygulamanızı hata ayıklamaya hazırlama

Kaynağınız küçültüldüyse veya TypeScript veya Babel gibi bir çevirici tarafından oluşturulduysa, en iyi hata ayıklama deneyimi için kaynak eşlemeleri kullanın. Kaynak eşlemeleri olmadan hata ayıklayıcıyı çalışan bir istemci tarafı betiğine bile ekleyebilirsiniz. Ancak, kaynak dosyada değil, yalnızca küçültüldü veya çevrilmiş dosyada kesme noktaları ayarlayıp isabet edebilir. Örneğin, Vue.js bir uygulamada, küçültülen betik bir eval deyime dize olarak geçirilir ve kaynak eşlemeleri kullanmadığınız sürece Visual Studio hata ayıklayıcısını kullanarak bu kodda etkili bir şekilde adım adım ilerleyemezsiniz. Karmaşık hata ayıklama senaryoları için bunun yerine Chrome Geliştirici Araçları'nı veya Microsoft Edge için F12 Araçları'nı kullanmak isteyebilirsiniz.

Kaynak eşlemeleri oluşturma konusunda yardım için bkz . Hata ayıklama için kaynak eşlemeleri oluşturma.

Tarayıcıyı hata ayıklamaya hazırlama

Bu senaryo için Microsoft Edge (Chromium) veya Chrome kullanın.

1. Hedef tarayıcı için tüm pencereleri kapatın.

   Diğer tarayıcı örnekleri, hata ayıklama etkinken tarayıcının açılmasını engelleyebilir. (Tarayıcı uzantıları çalışıyor ve tam hata ayıklama modunu kesiyor olabilir, bu nedenle Beklenmeyen Chrome örneklerini bulmak ve kapatmak için Görev Yöneticisi'ni açmanız gerekebilir.)

   En iyi sonuçlar için, Microsoft Edge (Chromium) ile çalışıyor olsanız bile tüm Chrome örneklerini kapatın. Her iki tarayıcı da aynı krom kod tabanını kullanır.

2. Hata ayıklama etkinken tarayıcınızı başlatın.

   Visual Studio 2019'dan başlayarak, Hata Ayıklama araç çubuğundan --remote-debugging-port=9222 Gözat...> öğesini seçerek tarayıcı başlatma sırasında bayrağı ayarlayabilirsiniz.

   

   Hata Ayıklama araç çubuğunda Birlikte Gözat... komutunu görmüyorsanız farklı bir tarayıcı seçin ve yeniden deneyin.

   Gözat iletişim kutusunda Ekle'yi seçin ve ardından Bağımsız Değişkenler alanında bayrağı ayarlayın. Tarayıcı için Hata Ayıklama ile Edge veya Hata Ayıklama ile Chrome gibi farklı bir kolay ad kullanın. Ayrıntılar için bkz . Sürüm Notları.

   

   Alternatif olarak, Windows Başlat düğmesinden Çalıştır komutunu açın (sağ tıklayın ve Çalıştır'ı seçin) ve aşağıdaki komutu girin:

   msedge --remote-debugging-port=9222

   Veya

   chrome.exe --remote-debugging-port=9222

   Bu, tarayıcınızı hata ayıklama etkin olarak başlatır.

   Uygulama henüz çalışmıyor, bu nedenle boş bir tarayıcı sayfası alırsınız.

Hata ayıklayıcıyı istemci tarafı betiğine ekleme

Hata ayıklayıcısını Visual Studio'dan eklemek ve istemci tarafı kodundaki kesme noktalarına isabet etmek için doğru işlemi tanımlama konusunda yardıma ihtiyacı vardır. Etkinleştirmenin bir yolu aşağıdadır.

1. Visual Studio'ya geçin ve kaynak kodunuzda JavaScript dosyası, TypeScript dosyası veya JSX dosyası olabilecek bir kesme noktası ayarlayın. (Kesme noktasını dönüş deyimi veya var bildirimi gibi kesme noktalarına izin veren bir kod satırında ayarlayın.)

   

   Çevrilmiş bir dosyadaki belirli kodu bulmak için Ctrl+F (Bul'u Düzenle>ve Hızlı Bul'u Değiştir>) kullanın.

   İstemci tarafı kodu için TypeScript dosyası, .vue veya JSX dosyasında kesme noktasına isabet etmek için genellikle kaynak eşlemelerin kullanılması gerekir. Visual Studio'da hata ayıklamayı desteklemek için kaynak eşlemenin doğru yapılandırılması gerekir.

2. Visual Studio'da hata ayıklama hedefi olarak hedef tarayıcınızı seçin, ardından uygulamayı tarayıcıda çalıştırmak için Ctrl+F5 (Hata Ayıklama>Hata Ayıklama Olmadan Başlat) tuşlarına basın.

   Kolay adla bir tarayıcı yapılandırması oluşturduysanız, hata ayıklama hedefi olarak bunu seçin. Uygulama yeni bir tarayıcı sekmesinde açılır.

3. İşleme Ekleme Hatalarını Ayıkla'yı>seçin.

   İpucu

   Visual Studio 2017'den başlayarak, bu adımları izleyerek işleme ilk kez ekledikten sonra, İşleme Yeniden Ekleme Hatalarını Ayıkla'yı>seçerek aynı işleme hızla yeniden bağlanabilirsiniz.

4. İşleme Ekle iletişim kutusunda, ekleyebileceğiniz tarayıcı örneklerinin filtrelenmiş bir listesini alın. Hedef tarayıcınız için doğru hata ayıklayıcıyı seçin, JavaScript (Chrome) veya JavaScript (Microsoft Edge - Chromium)Ekle alanına arama sonuçlarını filtrelemek için filtre kutusuna chrome veya edge yazın.

5. Doğru ana bilgisayar bağlantı noktasıyla tarayıcı işlemini seçin (localhostbu örnekte) ve Ekle'yi seçin.

   Bağlantı noktası (örneğin, 1337) doğru tarayıcı örneğini seçmenize yardımcı olmak için Başlık alanında da görünebilir.

   Aşağıdaki örnekte bunun Microsoft Edge (Chromium) tarayıcısı için nasıl göründüğü gösterilmektedir.

   

   İpucu

   Hata ayıklayıcısı eklenmiyorsa ve "Hata ayıklama bağdaştırıcısı başlatılamadı" veya "İşleme eklenemiyor. İşlem geçerli durumda yasal değildir." hata ayıklama modunda tarayıcıyı başlatmadan önce hedef tarayıcının tüm örneklerini kapatmak için Windows Görev Yöneticisi'ni kullanın. Tarayıcı uzantıları çalışıyor ve tam hata ayıklama modunu engelliyor olabilir.

6. Kesme noktası içeren kod zaten yürütülmüş olabilir, tarayıcı sayfanızı yenileyin. Gerekirse, kesme noktası olan kodun yürütülmesine neden olacak eylemi gerçekleştirin.

   Hata ayıklayıcıda duraklatılırken, değişkenlerin üzerine gelip hata ayıklayıcı pencerelerini kullanarak uygulama durumunuzu inceleyebilirsiniz. Kodda (F5, F10 ve F11) ilerleyerek hata ayıklayıcıyı ilerletebilirsiniz. Temel hata ayıklama özellikleri hakkında daha fazla bilgi için bkz . Hata ayıklayıcıya ilk bakış.

   Uygulamanızın türüne, daha önce izlediğiniz adımlara ve tarayıcı durumunuz gibi diğer faktörlere bağlı olarak, çevrilmiş .js bir dosyada veya kaynak dosyada kesme noktasına gidebilirsiniz. Her iki durumda da kodda adım adım ilerleyebilir ve değişkenleri inceleyebilirsiniz.

   • TypeScript, JSX veya .vue kaynak dosyada koda bölmeniz gerekiyorsa ve bunu yapamıyorsanız, Sorun Giderme bölümünde açıklandığı gibi ortamınızın doğru ayarlandığından emin olun.

   • Çevrilmiş bir JavaScript dosyasında (örneğin, app-bundle.js) koda bölmeniz gerekiyorsa ve bunu yapamıyorsanız, kaynak eşleme dosyasını filename.js.map'i kaldırın.

Kesme noktaları ve kaynak eşlemeleriyle ilgili sorunları giderme

Bir TypeScript veya JSX kaynak dosyasında koda bölmeniz gerekiyorsa ve bunu yapamıyorsanız, hata ayıklayıcıyı eklemek için önceki bölümde açıklandığı gibi İşleme Ekle'yi kullanın. Ortamınızın doğru ayarlandığından emin olun:

• Tarayıcıyı hata ayıklama modunda çalıştırabilmeniz için Chrome uzantıları da dahil olmak üzere tüm tarayıcı örneklerini kapatın (Görev Yöneticisi'ni kullanarak).

• Tarayıcıyı hata ayıklama modunda başlattığınızdan emin olun.

• Kaynak eşleme dosyanızın kaynak dosyanızın doğru göreli yolunu içerdiğinden ve webpack:/// gibi desteklenmeyen ön ekleri içermediğinden emin olun. Bu, Visual Studio hata ayıklayıcısının kaynak dosyayı bulmasını engeller. Örneğin, webpack:///.app.tsx gibi bir başvuru ./app.tsx olarak düzeltilebilir. Bunu kaynak eşleme dosyasında (test için yararlıdır) veya özel bir derleme yapılandırması aracılığıyla el ile yapabilirsiniz. Daha fazla bilgi için bkz . Hata ayıklama için kaynak eşlemeleri oluşturma.

Alternatif olarak, bir kaynak dosyada (örneğin, app.tsx) koda bölmeniz gerekiyorsa ve bunu yapamıyorsanız, kaynak dosyadaki deyimi kullanmayı debugger; veya bunun yerine Chrome Geliştirici Araçları'nda (veya Microsoft Edge için F12 Araçları) kesme noktaları ayarlamayı deneyin.

Hata ayıklama için kaynak eşlemeler oluşturma

Visual Studio, JavaScript kaynak dosyalarında kaynak eşlemeleri kullanma ve oluşturma özelliğine sahiptir. Kaynağınız genellikle TypeScript veya Babel gibi bir dönüştürücü tarafından küçültüldüyse veya oluşturulduysa bu gereklidir. Kullanılabilir seçenekler proje türüne bağlıdır.

• Visual Studio'daki bir TypeScript projesi varsayılan olarak sizin için kaynak eşlemeler oluşturur. Daha fazla bilgi için bkz . tsconfig.json dosyası kullanarak kaynak eşlemeleri yapılandırma.

• JavaScript projesinde, webpack gibi bir paketleyiciyi ve projenize ekleyebileceğiniz TypeScript derleyicisi (veya Babel) gibi bir derleyiciyi kullanarak kaynak eşlemeler oluşturabilirsiniz. TypeScript derleyicisi için bir tsconfig.json dosya eklemeli ve derleyici seçeneğini ayarlamalısınız sourceMap . Temel bir web paketi yapılandırması kullanarak bunun nasıl yapılacağını gösteren bir örnek için bkz . React ile Node.js uygulaması oluşturma.

Kaynak eşlemeler için gelişmiş ayarları yapılandırmak için, typeScript projesinde bir veya proje ayarlarını kullanın tsconfig.json , ancak ikisini birden kullanmayın.

Visual Studio kullanarak hata ayıklamayı etkinleştirmek için, oluşturulan kaynak eşlemede kaynak dosyanıza yapılan başvuruların doğru olduğundan emin olmanız gerekir (bunun için test gerekebilir). Örneğin, webpack kullanıyorsanız, kaynak eşleme dosyasındaki başvurular Visual Studio'nun TypeScript veya JSX kaynak dosyası bulmasını engelleyen webpack:/// ön ekini içerir. Özellikle, hata ayıklama amacıyla bunu düzelttiğinizde, kaynak dosya başvurusu (app.tsx gibi), webpack:///./app.tsx gibi bir öğeden hata ayıklamayı etkinleştiren ./app.tsx gibi bir şeye değiştirilmelidir (yol kaynak dosyanıza göredir). Aşağıdaki örnek, visual studio ile çalışabilmeleri için en yaygın paketleyicilerden biri olan web paketinde kaynak eşlemeleri nasıl yapılandırabileceğinizi gösterir.

(Yalnızca Webpack) Kesme noktasını JSX dosyasının TypeScript'inde (çevrilmiş bir JavaScript dosyası yerine) ayarlıysanız web paketi yapılandırmanızı güncelleştirmeniz gerekir. Örneğin, webpack-config.js aşağıdaki kodu değiştirmeniz gerekebilir:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

yerine şu kodu yazın:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[resource-path]'  // Removes the webpack:/// prefix
  },

Bu, Visual Studio'da istemci tarafı kodunda hata ayıklamayı etkinleştirmek için yalnızca geliştirme ayarıdır.

Karmaşık senaryolarda, tarayıcı araçları (F12) bazen hata ayıklama için en iyi şekilde çalışır çünkü özel ön eklerde değişiklik yapılmasını gerektirmezler.

tsconfig.json dosyası kullanarak kaynak eşlemeleri yapılandırma

Projenize bir tsconfig.json dosya eklerseniz, Visual Studio dizin kökünü bir TypeScript projesi olarak değerlendirir. Dosyayı eklemek için, Çözüm Gezgini'da projenize sağ tıklayın ve ardından Yeni Öğe > Türü EkleScript > JSON Yapılandırma Dosyası'nı seçin. tsconfig.json Projenize aşağıdaki gibi bir dosya eklenir.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json dosyası için derleyici seçenekleri

• inlineSourceMap: Her kaynak dosya için ayrı bir kaynak eşleme oluşturmak yerine kaynak eşlemelerle tek bir dosya yayın.
• inlineSources: Kaynağı kaynak eşlemeleriyle birlikte tek bir dosya içinde yayar; inlineSourceMap veya sourceMap'in ayarlanmasını gerektirir.
• mapRoot: Hata ayıklayıcının varsayılan konum yerine kaynak eşleme (.map) dosyalarını bulması gereken konumu belirtir. Çalışma zamanı .map dosyalarının dosyalardan .js farklı bir konumda olması gerekiyorsa bu bayrağı kullanın. Belirtilen konum, hata ayıklayıcıyı dosyaların konumuna yönlendirmek için kaynak eşlemeye .map eklenir.
• sourceMap: karşılık gelen .map bir dosya oluşturur.
• sourceRoot: Hata ayıklayıcının kaynak konumlar yerine TypeScript dosyalarını bulması gereken konumu belirtir. Çalışma zamanı kaynaklarının tasarım zamanındaki konumdan farklı bir konumda olması gerekiyorsa bu bayrağı kullanın. Belirtilen konum, hata ayıklayıcıyı kaynak dosyaların bulunduğu yere yönlendirmek için kaynak eşlemeye eklenir.

Derleyici seçenekleri hakkında daha fazla ayrıntı için TypeScript El Kitabı'nda Derleyici Seçenekleri sayfasını gözden geçirin.

Kaynak eşlemeleri proje ayarlarını kullanarak yapılandırma (TypeScript projesi)

Ayrıca projeye sağ tıklayıp Proje Özellikleri > TypeScript Derleme > Hata Ayıklaması'nı seçerek > proje özelliklerini kullanarak kaynak eşleme ayarlarını yapılandırabilirsiniz.

Bu proje ayarları kullanılabilir.

• Kaynak eşlemeleri oluşturma (tsconfig.json'daki sourceMap'e eşdeğer): Karşılık gelen .map dosyayı oluşturur.
• Kaynak eşlemelerin kök dizinini belirtin (tsconfig.json'da mapRoot ile eşdeğer): Hata ayıklayıcının oluşturulan konumlar yerine harita dosyalarını bulması gereken konumu belirtir. Çalışma zamanı .map dosyalarının dosyalardan .js farklı bir konumda bulunması gerekiyorsa bu bayrağı kullanın. Belirtilen konum, hata ayıklayıcıyı harita dosyalarının bulunduğu yere yönlendirmek için kaynak eşlemeye eklenir.
• TypeScript dosyalarının kök dizinini belirtin (tsconfig.json sourceRoot ile eşdeğer): Hata ayıklayıcının kaynak konumlar yerine TypeScript dosyalarını bulması gereken konumu belirtir. Çalışma zamanı kaynak dosyalarının tasarım zamanındaki konumdan farklı bir konumda olması gerekiyorsa bu bayrağı kullanın. Belirtilen konum, hata ayıklayıcıyı kaynak dosyaların bulunduğu yere yönlendirmek için kaynak eşlemeye eklenir.

Razor kullanarak dinamik dosyalarda JavaScript hatalarını ayıklama (ASP.NET)

Visual Studio 2019'dan başlayarak, Visual Studio yalnızca Chrome ve Microsoft Edge (Chromium) için hata ayıklama desteği sağlar.

Ancak Razor söz dizimi (cshtml, vbhtml) ile oluşturulan dosyalarda kesme noktalarına otomatik olarak isabet yapamazsınız. Bu tür bir dosyada hata ayıklamak için kullanabileceğiniz iki yaklaşım vardır:

• Deyimini debugger; kesmek istediğiniz yere yerleştirin: Bu deyim, dinamik betiğin yürütmeyi durdurmasına ve oluşturulurken hata ayıklamayı hemen başlatmasına neden olur.

• Sayfayı yükleyin ve Visual Studio'da dinamik belgeyi açın: Hata ayıklarken dinamik dosyayı açmanız, kesme noktanızı ayarlamanız ve bu yöntemin çalışması için sayfayı yenilemeniz gerekir. Chrome veya Microsoft Edge (Chromium) kullanıp kullanmadığınıza bağlı olarak, dosyayı aşağıdaki stratejilerden birini kullanarak bulabilirsiniz:

  • Chrome için Çözüm Gezgini > Betik Belgeleri > Sayfa adınız bölümüne gidin.

    Not

    Chrome kullanırken "betik> etiketleri arasında <kaynak yok" iletisini alabilirsiniz. Sorun değil, hata ayıklamaya devam edin.

  • Microsoft Edge (Chromium) için Chrome ile aynı yordamı kullanın.

Daha fazla bilgi için bkz . Google Chrome'da ASP.NET projelerinde istemci tarafı hata ayıklama.

İlgili içerik

Özellikler, React, Angular, Vue