Öğretici: Visual Studio'da Node.js ve React uygulaması oluşturma

Visual Studio ile kolayca bir Node.js projesi oluşturabilir ve Node.js'yi destekleyen IntelliSense ve diğer yerleşik özellikleri kullanabilirsiniz. Bu öğreticide, Visual Studio şablonundan node.js web uygulaması projesi oluşturacaksınız. Ardından React kullanarak basit bir uygulama oluşturursunuz.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Başlamadan önce, size bazı önemli kavramları tanıtacak hızlı bir SSS aşağıda verilmiştir:

• Node.js nedir?

  Node.js, JavaScript kodunu yürüten sunucu tarafı bir JavaScript çalışma zamanı ortamıdır.

• npm nedir?

  Node.js için varsayılan paket yöneticisi npm'dir. Paket yöneticisi, Node.js kaynak kodu kitaplıklarını yayımlamayı ve paylaşmayı kolaylaştırır. npm paket yöneticisi kitaplık yükleme, güncelleştirme ve kaldırma işlemlerini basitleştirir.

• React nedir?

  React, kullanıcı arabirimi (UI) oluşturmaya yönelik bir ön uç çerçevesidir.

• JSX nedir?

  JSX, kullanıcı arabirimi öğelerini açıklamak için genellikle React ile birlikte kullanılan bir JavaScript söz dizimi uzantısıdır. JSX kodunu tarayıcıda çalışabilmesi için önce düz JavaScript'e dönüştürmeniz gerekir.

• Webpack nedir?

  Webpack, tarayıcıda çalışabilmeleri için JavaScript dosyalarını paketler ve ayrıca diğer kaynakları ve varlıkları dönüştürebilir veya paketleyebilir. Webpack, JSX veya TypeScript kodunu düz JavaScript'e çevirmek için Babel veya TypeScript gibi bir derleyici belirtebilir.

Önkoşullar

Bu öğretici aşağıdaki önkoşulları gerektirir:

• Node.js geliştirme iş yükünün yüklü olduğu Visual Studio.

  Visual Studio'yu henüz yüklemediyseniz:

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

  2. Visual Studio Yükleyicisi Node.js geliştirme iş yükünü ve ardından Yükle'yi seçin.

     

  Visual Studio yüklüyse ancak Node.js iş yüküne ihtiyacınız varsa:

  1. Visual Studio'da Araçlar Araçları>ve Özellikleri Al'a gidin.

  2. Visual Studio Yükleyicisi Node.js geliştirme iş yükünü seçin ve değiştir'i seçerek iş yükünü indirip yükleyin.

• Node.js çalışma zamanı yüklendi:

  Node.js çalışma zamanı yüklü değilse Node.js web sitesinden LTS sürümünü yükleyin. LTS sürümü, diğer çerçeveler ve kitaplıklarla en iyi uyumluluğu sağlar.

  Visual Studio Node.js iş yükündeki Node.js araçları hem Node.js 32 bit hem de 64 bit mimari sürümlerini destekler. Visual Studio yalnızca bir sürüm gerektirir ve Node.js yükleyicisi aynı anda yalnızca bir sürümü destekler.

  Visual Studio genellikle yüklü Node.js çalışma zamanını otomatik olarak algılar. Aksi takdirde, projenizi yüklü çalışma zamanına başvuracak şekilde yapılandırabilirsiniz:

  1. Proje oluşturduktan sonra proje düğümüne sağ tıklayın ve Özellikler'i seçin.

  2. Özellikler bölmesinde Node.exe yolunu Node.js'nin genel veya yerel yüklemesine başvuracak şekilde ayarlayın. Node.js projelerinizin her birinde yerel yorumlayıcının yolunu belirtebilirsiniz.

Bir proje oluştur

İlk olarak bir Node.js web uygulaması projesi oluşturun.

Npm paketleri ekleme

Bu uygulama, aşağıdaki npm modüllerinin doğru çalışmasını gerektirir:

• Tepki
• react-dom
• express
• yol
• ts-loader
• typescript
• Webpack
• webpack-cli

Paket yüklemek için:

1. Çözüm Gezgini npm düğümüne sağ tıklayın ve Yeni npm Paketlerini Yükle'yi seçin.

2. Yeni npm Paketlerini Yükle iletişim kutusunda react paketini arayın ve yüklemek için Paketi Yükle'yi seçin.

   

   

   Yeni npm Paketlerini Yükle iletişim kutusunda, en güncel paket sürümünü yüklemeyi veya bir sürüm belirtmeyi seçebilirsiniz. Geçerli sürümleri yüklemeyi seçerseniz ancak daha sonra beklenmeyen hatalara karşılaşırsanız, sonraki adımda listelenen tam paket sürümlerini yüklemeyi deneyin.

   Visual Studio alt bölmesindeki Çıkış penceresi, paket yükleme ilerleme durumunu gösterir. Çıkışı Görüntüle'yi >seçerek veya Ctrl+Alt+O tuşlarına basarak Çıkış penceresini açın. Çıkış penceresinin Çıkış çıkışını göster alanında Npm'yi seçin.

   Yüklendiğinde, react paketi Çözüm Gezgini npm düğümü altında görünür.

   Projenin package.json dosyası, paket sürümü de dahil olmak üzere yeni paket bilgileriyle güncelleştirilir.

Kullanıcı arabirimini kullanarak paketlerin geri kalanını birer birer aramak ve eklemek yerine, gerekli paket kodunu package.json dosyasına yapıştırabilirsiniz.

1. Çözüm Gezgini visual studio düzenleyicisinde package.json dosyasını açın. Dosyanın sonundan önce aşağıdaki dependencies bölümü ekleyin:

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   Dosyanın zaten bir dependencies bölümü varsa, önceki JSON koduyla değiştirin. package.json dosyasını kullanma hakkında daha fazla bilgi için bkz. package.json yapılandırması.

2. Değişiklikleri kaydetmek için Ctrl+S tuşuna basın veya Package.json Dosyasını>Kaydet'i seçin.

3. Çözüm Gezgini'da projenizdeki npm düğümüne sağ tıklayın ve Npm Paketlerini Yükle'yi seçin.

   Bu komut, packages.json dosyasında listelenen tüm paketleri yüklemek için npm install komutunu doğrudan çalıştırır.

   Yükleme ilerleme durumunu görmek için alt bölmedeki Çıkış penceresini seçin. Yükleme birkaç dakika sürebilir ve sonuçları hemen göremeyebilirsiniz. Çıkış penceresindeki Çıkış çıkışınıgöster alanında Npm'yi seçtiğinizden emin olun.

   Yüklemeden sonra npm modülleri Çözüm Gezgini'daki npm düğümünde görünür.

   

   

   Not

   Komut satırını kullanarak npm paketlerini de yükleyebilirsiniz. Çözüm Gezgini'da proje adına sağ tıklayın ve Komut İstemini Burada Aç'ı seçin. Paketleri yüklemek için standart Node.js komutlarını kullanın.

Proje dosyaları ekleme

Ardından projenize dört yeni dosya ekleyin.

• app.tsx
• webpack-config.js
• Index.html
• tsconfig.json

Bu basit uygulama için yeni proje dosyalarını proje köküne eklersiniz. Çoğu uygulama için dosyaları alt klasörlere ekler ve göreli yol başvurularını buna göre ayarlarsınız.

1. Çözüm Gezgini proje adını seçin ve Ctrl+Shift+A tuşlarına basın veya proje adına sağ tıklayıp Yeni Öğe Ekle'yi>seçin.

   Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i ve ardından öğe şablonunu seçin.

2. Yeni Öğe Ekle iletişim kutusunda TypeScript JSX Dosyası'nı seçin, app.tsx adını yazın ve Ekle veya Tamam'ı seçin.

3. Webpack-config.js adlı bir JavaScript dosyası eklemek için bu adımları yineleyin.

4. Index.html adlı bir HTML dosyası eklemek için bu adımları yineleyin.

5. tsconfig.json adlı bir TypeScript JSON Yapılandırma Dosyası eklemek için bu adımları yineleyin.

Uygulama kodu ekleme

1. Çözüm Gezgini'da server.js dosyasını açın ve mevcut kodu aşağıdaki kodla değiştirin:

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   Yukarıdaki kod, Node.js dosyasını web uygulaması sunucunuz olarak başlatmak için Express kullanır. Kod, bağlantı noktasını varsayılan olarak 1337 olan proje özelliklerinde yapılandırılan bağlantı noktası numarasına ayarlar. Proje özelliklerini açmanız gerekiyorsa, Çözüm Gezgini proje adına sağ tıklayın ve Özellikler'i seçin.

2. app.tsx dosyasını açın ve aşağıdaki kodu ekleyin:

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   Yukarıdaki kod, bir iletiyi görüntülemek için JSX söz dizimini ve React'i kullanır.

3. index.html dosyasını açın ve bölümünü aşağıdaki kodla değiştirinbody:

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   Bu HTML sayfası, düz JavaScript'e çevrilmiş JSX ve React kodunu içeren app-bundle.js dosyasını yükler. Şu anda app-bundle.js boş bir dosyadır. Sonraki bölümde kodu dönüştürme seçeneklerini yapılandıracaksınız.

Webpack ve TypeScript derleyici seçeneklerini yapılandırma

Ardından webpack-config.js dosyasına Webpack yapılandırma kodu ekleyebilirsiniz. JSX'i düz JavaScript'e paketlemek ve çevirmek için app.tsx giriş dosyasını ve app-bundle.js çıkış dosyasını belirten basit bir Webpack yapılandırması eklersiniz. Çeviri için bazı TypeScript derleyici seçeneklerini de yapılandırırsınız. Bu temel yapılandırma kodu, Webpack ve TypeScript derleyicisine giriş niteliğindedir.

1. Çözüm Gezgini webpack-config.js dosyasını açın ve aşağıdaki kodu ekleyin.

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Webpack yapılandırma kodu, Webpack'e JSX'i çevirmek için TypeScript yükleyicisini kullanma talimatı verir.

2. tsconfig.json dosyasını açın ve içeriğini TypeScript derleyici seçeneklerini belirten aşağıdaki kodla değiştirin:

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   Kod, kaynak dosya olarak app.tsx dosyasını belirtir.

3. Tüm değişiklikleri kaydetmek için Ctrl+Shift S tuşlarına+basın veya Dosya>Tümünü Kaydet'i seçin.

JSX'i dönüştürme

1. Çözüm Gezgini'da proje adına sağ tıklayın ve Komut İstemini Burada Aç'ı seçin.

2. Komut istemine aşağıdaki Webpack komutunu girin:

   node_modules\.bin\webpack --config webpack-config.js

   Komut istemi penceresinde sonuç gösterilir.

   

   Önceki çıkış yerine herhangi bir hata görürseniz, uygulamanız çalışmadan önce bunları çözmeniz gerekir. npm paketi sürümleriniz bu öğreticinin belirttiği sürümlerden farklıysa, bu hatalara neden olabilir. Hataları düzeltmek için aşağıdakileri deneyin:

   • Daha önce yapmadıysanız, önceki adımda gösterilen tam sürümleri kullanın

     Ya da hala hatalar görüyorsanız:

   • Çözüm Gezgini'da npm düğümüne sağ tıklayıp Npm paketlerini yükle'yi seçerek npm paketlerinin en son sürümlerini yükleyin.

   Bir veya daha fazla paket sürümü kullanım dışı bırakıldıysa ve hatayla sonuçlanırsa, hataları düzeltmek için daha yeni bir sürüm yüklemeniz gerekebilir. npm paket sürümlerini denetlemek için package.json kullanma hakkında bilgi için bkz. package.json yapılandırması.

3. Çözüm Gezgini proje düğümüne sağ tıklayın ve Varolan Klasörü Ekle'yi>seçin.

4. Dağ klasörünü ve ardından Klasör Seç'i seçin.

   Visual Studio, projeye app-bundle.js ve app-bundle.js.map içeren dist klasörünü ekler.

5. Çevrilmiş JavaScript kodunu görmek için app-bundle.js dosyasını açın.

6. Harici olarak değiştirilmiş dosyaların yeniden yüklenip yüklenmeyeceği sorulursa Tümüne Evet'i seçin.

   

app.tsx dosyasında her değişiklik yaptığınızda Webpack komutunu yeniden çalıştırmanız gerekir. Bu adımı otomatikleştirmek için JSX'i dönüştürmeye yönelik bir derleme betiği ekleyebilirsiniz.

JSX'i dönüştürmeye yönelik derleme betiği ekleme

Visual Studio 2019 ile başlayan Visual Studio sürümleri bir derleme betiği gerektirir. Önceki bölümde gösterildiği gibi JSX'i komut satırında çevirmek yerine Visual Studio'dan oluştururken JSX'i çevirebilirsiniz.

1. package.json dosyasını açın ve bölümünden sonra dependencies aşağıdaki bölümü ekleyin:

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. Değişikliklerinizi kaydedin.

Uygulamayı çalıştırma

1. Hata ayıklama araç çubuğunda hata ayıklama hedefi olarak Web Sunucusu (Microsoft Edge) veya Web Sunucusu (Google Chrome) seçeneğini belirleyin.

   

   

   Tercih ettiğiniz hata ayıklama hedefinin makinenizde kullanılabilir olduğunu biliyor ancak seçenek olarak görünmüyorsa hata ayıklama hedefi açılan listesinden Gözat'ı seçin. Listeden varsayılan tarayıcı hedefinizi seçin ve Varsayılan Olarak Ayarla'yı seçin.

2. Uygulamayı çalıştırmak için F5 tuşuna basın, yeşil ok düğmesini seçin veya Hata AyıklamaYı Başlat Hata Ayıklama'yı> seçin.

   Hata ayıklayıcı dinleme bağlantı noktasını gösteren bir Node.js konsol penceresi açılır.

   Visual Studio, server.js başlangıç dosyasını başlatarak uygulamayı başlatır.

   

3. Tarayıcıyı ve konsol pencerelerini kapatın.

Kesme noktası ayarlama ve uygulamayı çalıştırma

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. Daha sonra değişken değerleri, bellek davranışını veya bir kod dalının çalışıp çalışmadığını gözlemleyebilirsiniz.

1. server.js dosyasında, bir kesme noktası ayarlamak için bildirimin solundaki staticPath olukta tıklayın:

   

   

2. Uygulamayı çalıştırmak için F5 tuşuna basın veya Hata Ayıklamayı Başlat Hata Ayıklama'yı> seçin.

   Hata ayıklayıcı, ayarladığınız kesme noktasında duraklatılır ve geçerli deyim vurgulanır. Artık, Yerel Öğeler ve İzleme pencereleri gibi hata ayıklayıcı pencerelerini kullanarak, şu anda kapsam dahilinde olan değişkenlerin üzerine gelerek uygulama durumunuzu inceleyebilirsiniz.

3. Uygulamayı çalıştırmaya devam etmek için F5 tuşuna basın, Hata Ayıklama araç çubuğunda Devam'ı seçin veya Hata Ayıklama Devamı'nı> seçin.

   Chrome Geliştirici Araçları'nı veya Microsoft Edge için F12 Araçları'nı kullanmak istiyorsanız F12'ye basın. DOM'u incelemek ve JavaScript Konsolu'nu kullanarak uygulamayla etkileşime geçmek için bu araçları kullanabilirsiniz.

4. Tarayıcıyı ve konsol pencerelerini kapatın.

İstemci tarafı React kodunda kesme noktası ayarlama ve kesme noktasına basma

Önceki bölümde hata ayıklayıcıyı sunucu tarafı Node.js koduna eklemişsinizdir. İstemci tarafı React kodundaki kesme noktalarına eklemek ve bunlara isabet etmek için hata ayıklayıcıyı doğru işleme eklemeniz gerekir. Tarayıcıyı etkinleştirmenin ve hata ayıklama işlemi eklemenin bir yolu aşağıdadır.

Tarayıcıyı hata ayıklama için etkinleştirme

Microsoft Edge veya Google Chrome'u kullanabilirsiniz. Hedef tarayıcı için tüm pencereleri kapatın. Microsoft Edge için Chrome'un tüm örneklerini de kapatın. Her iki tarayıcı da Chromium kod tabanını paylaştığından, her iki tarayıcının da kapatılması en iyi sonuçları verir.

Diğer tarayıcı örnekleri, hata ayıklama etkinken tarayıcının açılmasını engelleyebilir. Tarayıcı uzantıları tam hata ayıklama modunu engelleyebilir. Çalışan tüm Chrome örneklerini bulmak ve sonlandırmak için Görev Yöneticisi'ni kullanmanız gerekebilir.

Tarayıcınızı hata ayıklama etkin olarak başlatmak için:

1. Hata Ayıklama araç çubuğundaki açılan listeden Gözat'ı seçin.

2. Gözat ekranında, tercih ettiğiniz tarayıcı vurgulanmış olarak Ekle'yi seçin.

3. Bağımsız Değişkenler alanına --remote-debugging-port=9222 bayrağını girin.

4. Tarayıcıya hata ayıklama ile Edge veya hata ayıklama ile Chrome gibi yeni bir kolay ad verin ve tamam'ı seçin.

5. Gözat ekranında Gözat'ı seçin.

   

• Alternatif olarak, Windows Başlat düğmesine sağ tıklayarak Çalıştır komutunu açabilir ve şunu girebilirsiniz:

  msedge --remote-debugging-port=9222

  veya

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

Tarayıcı, hata ayıklama etkin olarak başlar. Uygulama henüz çalışmıyor, bu nedenle tarayıcı sayfası boş.

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

1. Visual Studio düzenleyicisinde app-bundle.js veya app.tsx kaynak kodunda bir kesme noktası ayarlayın.

   • app-bundle.js için işlevdeki render() kesme noktasını ayarlayın. İşlevi app-bundle.js dosyasında bulmak için Ctrl F tuşuna+basın veya Bul'u Düzenle>ve Hızlı Bul'u Değiştir'i>seçin ve arama alanına render yazın.render()

     

     

   • app.tsx için işlevin içindeki render() kesme noktasını deyiminde returnayarlayın.

     

     

     app.tsx dosyasında kesme noktasını ayarlarsanız, aşağıdaki kodu değiştirmek için webpack-config.js dosyasını güncelleştirin ve değişikliklerinizi kaydedin.

     Bu kodu değiştirin:

     output: {
         filename: "./app-bundle.js",
     },
     

     Yerine şu kodu yazın:

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     Bu yalnızca geliştirme ayarı Visual Studio'da hata ayıklamayı etkinleştirir. Varsayılan olarak, kaynak eşleme dosyasındaki Webpack başvuruları, Visual Studio'nun app.tsx kaynak dosyasını bulmasını engelleyen webpack:/// ön ekini içerir. Bu ayar, uygulamayı oluştururken app-bundle.js.map kaynak eşleme dosyasında oluşturulan başvuruları geçersiz kılar. Özel olarak, bu ayar kaynak dosya başvuruyu webpack:///./app.tsxolan ./app.tsx olarak değiştirir ve bu da hata ayıklamayı etkinleştirir.

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

   Kolay bir adla hata ayıklama özellikli bir tarayıcı yapılandırması oluşturduysanız, hata ayıklama hedefiniz olarak bu tarayıcıyı seçin.

   Uygulama yeni bir tarayıcı sekmesinde açılır.

3. İşleme Ekleme Hatalarını Ayıkla'yı>seçin veya Ctrl+Alt+P tuşlarına basın.

   İpucu

   İşleme ilk kez ekledikten sonra, İşleme Yeniden Ekleme Hatalarını Ayıkla'yı>seçerek veya Shift Alt+P tuşlarına+basarak 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ı olan JavaScript (Chrome) veya JavaScript (Microsoft Edge - Chromium), Ekle alanında göründüğünden emin olun. Sonuçları filtrelemek için filtre kutusuna krom veya kenar yazın.

5. Bu örnekte doğru ana bilgisayar bağlantı noktası localhost olan tarayıcı işlemini seçin. Doğru işlemi seçmenize yardımcı olması için Başlık alanında 1337 veya localhost bağlantı noktası numarası da görünebilir.

6. İliştir'i seçin.

   Aşağıdaki örnekte, Microsoft Edge tarayıcısı için İşleme Ekle penceresi gösterilmektedir.

   

   İpucu

   Hata ayıklayıcı eklenmiyorsa ve işleme eklenemiyor iletisini görüyorsanız. Geçerli durumda bir işlem yasal değildir., tarayıcıyı hata ayıklama modunda başlatmadan önce hedef tarayıcının tüm örneklerini kapatmak için Görev Yöneticisi'ni kullanın. Tarayıcı uzantıları çalışıyor ve tam hata ayıklama modunu engelliyor olabilir.

7. Kesme noktası içeren kod zaten yürütülmüş olduğundan, kesme noktasına gitmek için tarayıcı sayfanızı yenileyin.

   Ortamınıza, tarayıcı durumunuza ve daha önce izlediğiniz adımlara bağlı olarak app-bundle.js dosyasında kesme noktasına veya app.tsx dosyasında eşlenen konumuna basabilirsiniz. Her iki durumda da kodda adım adım ilerleyebilir ve değişkenleri inceleyebilirsiniz.

   Hata ayıklayıcı duraklatılırken, değişkenlerin üzerine gelip hata ayıklayıcı pencerelerini kullanarak uygulama durumunuzu inceleyebilirsiniz. Kodda adım adım ilerleyebilmek için F11 tuşuna basın veya Hata Ayıkla>Adımla'yı seçin ya da F10 tuşuna basın ya da Hata Ayıkla>Adım Üzerinde'yi seçin. Kodu çalıştırmaya devam etmek için F5 tuşuna basın veya Devam'ı seçin. Temel hata ayıklama özellikleri hakkında daha fazla bilgi için bkz . Hata ayıklayıcıya ilk bakış.

   • app.tsx dosyasında koda giremiyorsanız, önceki adımlarda açıklandığı gibi hata ayıklayıcıyı eklemek için İşleme Ekle'yi kullanmayı yeniden deneyin. Ortamınızın doğru ayarlandığından emin olun:

     • Görev Yöneticisi'ni kullanarak Chrome uzantıları da dahil olmak üzere tüm tarayıcı örneklerini kapatın. Tarayıcıyı hata ayıklama modunda başlattığınızdan emin olun.

     • Kaynak eşleme dosyanızda visual studio hata ayıklayıcısının app.tsx dosyasını bulmasını engelleyen webpack:///./app.tsx değil ./app.tsx başvurusu bulunduğundan emin olun.

     Ya da app.tsx dosyasında deyimini debugger; kullanmayı deneyin veya bunun yerine Chrome Geliştirici Araçları veya Microsoft Edge için F12 Araçları'nda kesme noktaları ayarlayın.

   • app-bundle.js dosyasında koda giremiyorsanız app-bundle.js.map kaynak eşleme dosyasını kaldırın.

Sonraki adımlar