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.

İpucu

Visual Studio'yu henüz yüklemediyseniz ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin.

Hata ayıklamayı yapılandırma

Visual Studio 2022'deki .esproj projeleri için Visual Studio Code, hata ayıklayıcıyı yapılandırmak ve özelleştirmek için bir launch.json dosyası kullanır. launch.json bir hata ayıklayıcısı yapılandırma dosyasıdır.

Visual Studio, hata ayıklayıcıyı yalnızca kullanıcı koduna ekler. .esproj projeleri için, launch.jsoniçindeki skipFiles ayarını kullanarak Visual Studio'da kullanıcı kodunu (Yalnızca Kodum ayarları olarak da adlandırılır) yapılandırabilirsiniz. Bu, VS Code'daki launch.json ayarlarıyla aynı şekilde çalışır. skipFiles ve diğer hata ayıklayıcı yapılandırma seçenekleri hakkında daha fazla bilgi için, İlgi Çekmeyen Kodu Atlamak ve Başlatma Yapılandırma Öznitelikleribölümlerine bakınız.

Sunucu tarafı betiğinde hata ayıklama

1. Projeniz Visual Studio'da açıkken, bir sunucu tarafı JavaScript dosyası açın (server.jsgibi), kesme noktası yerleştirmek için kenar boşluğuna tıklayın.

   

   Kesme noktaları, güvenilir hata ayıklamanın en temel ve temel ö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 (Hata Ayıklama>Hata Ayıklamayı Başlat) tuşlarına basın.

   Hata ayıklayıcı ayarladığınız kesme noktasında duraklatılır (IDE, deyimi sarı arka planda vurgular). Artık, Locals ve Watch pencereleri gibi hata ayıklayıcı pencerelerini kullanarak geçerli kapsamdaki değişkenlerin üzerine gelerek uygulama durumunuzu inceleyebilirsiniz.

   

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

4. Chrome Geliştirici Araçları'nı kullanmak istiyorsanız Chrome tarayıcısında F12 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 için istemci tarafı hata ayıklama desteği sağlar. Bazı senaryolarda, hata ayıklayıcısı JavaScript ve TypeScript kodundaki 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çenekleri>Hata Ayıklamaseçeneğini belirleyin ve ardından ASP.NET için JavaScript Hata Ayıklamayı Etkinleştir (Chrome, Edge ve IE) seçin.

  İstemci tarafı betiğinde hata ayıklamak için Chrome Geliştirici Araçları'nı veya Microsoft Edge için F12 Araçları'nı kullanmayı tercih ediyorsanız, bu ayarı devre dışı bırakmalısınız.

  Daha ayrıntılı bilgi için Google Chrome için bublog gönderisini inceleyin. ASP.NET Core'da TypeScript'te hata ayıklamak için bkz. Var olan ASP.NET Core uygulamasına TypeScript ekleme.

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

Not

ASP.NET ve ASP.NET Core için, 'daki .CSHTML dosyalarında gömülü betiklerde hata ayıklama desteklenmez. Hata ayıklamayı etkinleştirmek için JavaScript kodu ayrı dosyalarda olmalıdır.

Uygulamanızı hata ayıklamaya hazırlama

Kaynağınız küçültüldüyse veya TypeScript ya da Babel gibi bir çevirici tarafından oluşturulduysa, en iyi hata ayıklama deneyimi için kaynak eşlemelerini kullanın. Kaynak eşlemeleri olmadan hata ayıklayıcıyı çalışmakta olan bir istemci tarafı betiğine bile ekleyebilirsiniz. Ancak, yalnızca küçültülmüş veya transpile edilmiş dosyada kesme noktaları ayarlayabilir ve çalıştırabilirsiniz, kaynak dosyada değil. Örneğin, Vue.js bir uygulamada, küçültülen betik bir eval deyimine 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 veya Chrome kullanın.

1. Microsoft Edge veya Chrome örnekleri gibi 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 veya Edge örneklerini bulup kapatmak için Görev Yöneticisi'ni açmanız gerekebilir.)

   En iyi sonuçlar için, Microsoft Edge 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 Birlikte Gözat...> seçeneğini seçerek tarayıcı başlatıldığında --remote-debugging-port=9222 bayrağını ayarlayabilirsiniz.

   

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

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

   

   Uygulamanızı tarayıcıda hata ayıklama modunda başlatmak için Gözat'i seçin.

   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. (Çalıştır komutunu kullanarak tarayıcıyı başlatırsanız, uygulama örneğinize yönelik doğru URL'yi yapıştırmanız gerekir.)

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. Önceki bölümde açıklandığı gibi uygulamanızın tarayıcıda hata ayıklama modunda çalıştığından emin olun.

   Kullanımı kolay bir adla tarayıcı yapılandırması oluşturduysanız, bunu hata ayıklama hedefi olarak seçin ve ardından uygulamayı tarayıcıda çalıştırmak için Ctrl+F5 tuşlarına basın (Hata Ayıklama>Hata Ayıklama Olmadan Başlat).

2. 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 kullanın (Düzenle>Bul ve Değiştir>Hızlı Bul).

   İstemci tarafı kodunda, bir TypeScript dosyasında veya .vueya da JSX dosyasında kesme noktasına ulaşmak için genellikle kaynak eşlemelerininkullanılması gerekir. Visual Studio'da hata ayıklamayı desteklemek için kaynak eşlemenin doğru yapılandırılması gerekir.

3. Seçin Hata Ayıklama>İşleme Ekle.

   İpucu

   Visual Studio 2017'den başlayarak, bu adımları izleyerek işleme ilk kez ekledikten sonra, Hata Ayıklama>İşleme'a Yeniden Ekle'yi seçerek aynı işleme hızla yeniden bağlanabilirsiniz.

4. İşleme Ekle iletişim kutusunda, Bağlantı Türüolarak JavaScript ve TypeScript (Chrome Geliştirme Araçları/V8 Denetçisi) seçeneğini seçin.

   http://localhost:9222gibi hata ayıklayıcı hedefi Bağlantı Hedefi alanında görünmelidir.

5. Tarayıcı örnekleri listesinde doğru ana bilgisayar bağlantı noktasıyla (bu örnektehttps://localhost:7184/) tarayıcı işlemini seçin ve ile iliştir'i seçin.

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

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

   

   İpucu

   Hata ayıklayıcı eklenmiyorsa ve "Hata ayıklama bağdaştırıcısı başlatılamadı" veya "İşleme eklenemiyor" mesajını görüyorsanız, İş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. Hata ayıklayıcısını ilerletmek için kodda ilerleyebilirsiniz (F5, F10ve F11). Temel hata ayıklama özellikleri hakkında daha fazla bilgi için bkz. hata ayıklayıcıya ilk bakış.

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

   • Bir TypeScript, JSX veya .vue kaynak dosyasında 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) kodu ayırmanız gerekiyorsa ve bunu yapamıyorsanız source map dosyasını kaldırın filename.js.map.

Kesme noktaları ve kaynak haritalarıyla ilgili sorunları giderme

Bir TypeScript veya JSX kaynak dosyasında koda bölmeniz gerekiyorsa ve bunu yapamıyorsanız, hata ayıklayıcıyı bağlamak için, önceki bölümde açıklandığı gibi İşleme Bağlan 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 modundabaşlattığınızdan emin olun.

• Kaynak eşleme dosyanızın kaynak dosyanızın doğru göreli yolunu içerdiğinden ve Visual Studio hata ayıklayıcısının kaynak dosyayı bulmasını engelleyen webpack:///gibi desteklenmeyen ön ekleri içermediğinden emin olun. Ö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 debugger; deyimini kullanmayı 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. Kaynak eşlemeleri tsconfig.json dosyakullanarak 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 dosyası eklemeniz ve sourceMap derleyici seçeneğini ayarlamanız gerekir. Temel bir web paketi yapılandırması kullanarak bunun nasıl yapıldığını gösteren bir örnek için bkz. React ile Node.js uygulaması oluşturma.

Not

Kaynak eşlemeleri konusunda yeniyseniz, Kaynak Haritaları nedir? bölümünü okumadan devam etmeyin.

Kaynak eşlemeler için gelişmiş ayarları yapılandırmak için typeScript projesinde bir tsconfig.json veya proje ayarlarını kullanın, 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.tsxgibi), webpack:///./app.tsxgibi bir öğeden hata ayıklamaya olanak tanıyan ./app.tsxgibi 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.jsiçinde aşağıdaki kodu değiştirmeniz gerekebilir:

JavaScript

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

şu kodla:

JavaScript

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-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 senaryolar için 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 haritalarını yapılandırma

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

JSON

{
  "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 bir kaynak dosyası için ayrı ayrı kaynak eşlemeler oluşturmak yerine kaynak eşlemelerle tek bir dosya yayınla.
• inlineSources: Kaynağı ve kaynak eşlemeleri tek bir dosyada yayımlar; bunun için inlineSourceMap veya sourceMap ayarlanması gerekir.
• 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 .js dosyalardan farklı bir konumda olması gerekiyorsa bu bayrağı kullanın. Belirtilen konum, hata ayıklayıcıyı .map dosyalarının konumuna yönlendirmek için kaynak eşlemeye eklenir.
• sourceMap: karşılık gelen bir .map dosyası 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 bilgi için TypeScript El Kitabı'nda Derleyici Seçenekleri sayfasını gözden geçirin.

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

Visual Studio 2022'de kesme noktalarını kullanarak Razor sayfalarında hata ayıklayabilirsiniz. Daha fazla bilgi için bkz. Visual Studio'da Hata Ayıklama Araçlarını Kullanma.

İlgili içerik

Özellikleri, React, Angular, Vue