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

2025-01-23

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

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

Node.js projesi oluşturma
Npm paketleri ekleme
Uygulamanıza React kodu ekleme
JSX Dönüştürme
Hata ayıklayıcıyı ekleme

Önemli

Visual Studio 2022'den başlayarak, alternatif olarak önerilen CLI tabanlı proje türünükullanarak react proje oluşturabilirsiniz. Bu makaledeki bilgilerin bazıları yalnızca Node.js proje türü (.njsproj) için geçerlidir. Bu makalede kullanılan şablon artık Visual Studio 2022 sürüm 17.8 Önizleme 2'den itibaren kullanılamaz.

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

Node.jsnedir?

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 kod 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 indirmek için Visual Studio indirmeleri sayfası 'ne gidin.
2. Visual Studio Yükleyicisi'nde Node.js geliştirme iş yükünü seçin ve 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 Almagidin.
2. Visual Studio Yükleyicisi'nde Node.js geliştirme iş yükünü seçin ve Değiştir 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 sitesindenLTS 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 özelliklerseçin.
2. Özellikler bölmesinde, Node.jsgenel veya yerel yüklemesine başvurmak için Node.exe yolu ayarlayın. Node.js projelerinizin her birinde yerel yorumlayıcının yolunu belirtebilirsiniz.

Bu öğretici Node.js 12.6.2 ile test edilmiştir.

Proje oluşturma

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

Visual Studio'yu açın.
Yeni bir proje oluşturun.

Başlangıç penceresini kapatmak için esc basın. Arama kutusunu açmak için Ctrl + Q yazın, Node.jsyazın, ardından Boş Node.js Web Uygulaması - JavaScriptseçin. (Bu öğreticide TypeScript derleyicisi kullanılıyor olsa da, adımlar JavaScript şablonuyla başlamanızı gerektirir.)

Görüntülenen iletişim kutusunda Oluştur'i seçin.

Boş Node.js Web Uygulaması proje şablonunu görmüyorsanız, Node.js geliştirme iş yükünü eklemeniz gerekir. Ayrıntılı yönergeler için Önkoşullarbölümüne bakın.

Visual Studio yeni çözümü oluşturur ve projenizi açar.

çözüm gezgini Node.js projesini gösteren ekran görüntüsü

(1) Kalın olarak vurgulanan projeniz, Yeni Proje iletişim kutusunda verdiğiniz adı kullanarak belirtilir. Dosya sisteminde, bu proje proje klasörünüzdeki bir .njsproj dosyasıyla temsil edilir. Projeye sağ tıklayıp Özellikler seçerek projeyle ilişkili özellikleri ve ortam değişkenlerini ayarlayabilirsiniz (veya Alt Enter) tuşlarına basabilirsiniz. Proje dosyası Node.js proje kaynağında özel değişiklikler yapmadığından, diğer geliştirme araçlarıyla yuvarlama yapabilirsiniz.

(2) En üst düzeyde, varsayılan olarak projenizle aynı ada sahip olan bir çözüm bulunur. Disk üzerindeki bir .sln dosyasıyla temsil edilen bir çözüm, bir veya daha fazla ilgili proje için bir kapsayıcıdır.

(3) npm düğümü yüklü npm paketlerini gösterir. bir iletişim kutusu kullanarak npm paketlerini aramak ve yüklemek için npm düğümüne sağ tıklayabilir veya npm düğümündeki package.json ve sağ tıklama seçeneklerindeki ayarları kullanarak paketleri yükleyip güncelleştirebilirsiniz.

(4) package.json, npm tarafından yerel olarak yüklenen paketler için paket bağımlılıklarını ve paket sürümlerini yönetmek için kullanılan bir dosyadır. Daha fazla bilgi için bkz. Npm paketlerini yönetme.

(5) server.js gibi proje dosyaları proje düğümü altında gösterilir. server.js projenin başlangıç dosyasıdır ve bu nedenle kalınolarak gösterilir. Başlangıç dosyasını, projedeki bir dosyaya sağ tıklayıp başlangıç dosyası olarak ayarla'yı seçerek Node.js başlangıç dosyası olarak ayarlaayarlayabilirsiniz.

Npm paketleri ekleme

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

Tepki vermek
react-dom
ekspres
yol
ts-loader
daktilo yazısı
webpack
webpack-cli

Paket yüklemek için:

Çözüm Gezgini'nde, npm düğümüne sağ tıklayın ve Yeni npm Paketleri Yükleseçeneğini seçin.
Yeni npm Paketlerini Yükle iletişim kutusunda react paketini arayın ve yüklemek için Paket Yükle seçin.

Yeni npm Paketleri 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 Çıktı penceresinde paket yükleme ilerleme durumu gösterilir. Çıktı penceresini açmak için Görünüm>Çıkış'ni seçin veya Ctrl+Alt+Otuşlarına basın. Çıktı penceresinin alanındaki çıktıyı göster kısmında, Npm'i seçin.

Yüklendiğinde, react paketi Çözüm Gezginiiçerisindeki npm öğesi 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.jsonyapıştırabilirsiniz.

Çözüm Gezginiöğesi package.json'ü Visual Studio düzenleyicisinde açın. Dosyanın sonundan önce aşağıdaki dependencies bölümünü 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. dosyasını kullanma hakkında daha fazla bilgi için bkz. yapılandırmapackage.json.
Değişiklikleri kaydetmek için Ctrl+S tuşlarına basın veya Dosya>Kaydet package.json seçin.
Çözüm Gezgini'nde, projenizdeki npm düğümüne sağ tıklayın ve npm Paketlerini Yükleseçin.

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

Yüklemenin ilerleme durumunu görmek için alt bölmedeki Çıktı penceresini seçin. Yükleme birkaç dakika sürebilir ve sonuçları hemen göremeyebilirsiniz. Çıktı penceresindeki çıktıyı göster Npm seçtiğinizden emin olun.

Yüklemeden sonra, npm modülleri Çözüm Gezgininpm düğümünde görünür.

Not

Komut satırını kullanarak npm paketlerini de yükleyebilirsiniz. Çözüm Gezginibölümünde proje adına sağ tıklayın ve Komut İstenicisini 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.

Çözüm Gezgini'nde proje adını seçin ve CtrlShiftAtuşlarına basın veya proje adına sağ tıklayıp Yeni Öğe Ekleekle'yi seçin.

Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Gösteröğesini ve ardından öğe şablonunu seçin.
Yeni Öğe Ekle iletişim kutusunda TypeScript JSX Dosyasıseçin, adını app.tsxyazın ve Ekle veya Tamamseçin.
webpack-config.jsadlı bir JavaScript dosyası eklemek için bu adımları yineleyin.
index.htmladlı bir HTML dosyası eklemek için bu adımları yineleyin.
tsconfig.jsonadlı bir TypeScript JSON Yapılandırma Dosyası eklemek için bu adımları yineleyin.

Uygulama kodu ekleme

Çözüm Gezginiserver.js açın ve var olan 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, web uygulaması sunucunuz olarak Node.js 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'nde proje adına sağ tıklayın ve Özellikler'i seçin.

app.tsx 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.

index.html açın ve body bölümünü aşağıdaki kodla değiştirin:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Bu HTML sayfası, düz JavaScript'e çevrilmiş JSX ve React kodunu içeren app-bundle.jsyü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 yapılandırma kodunu webpack-config.jsekleyebilirsiniz. JSX'i düz JavaScript'e paketlemek ve çevirmek için bir giriş dosyası, app.tsxve app-bundle.jsbir çıkış dosyası belirten basit bir web paketi 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, web paketine ve TypeScript derleyicisine giriş niteliğindedir.

Çözüm Gezgini'da webpack-config.js 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.

tsconfig.json 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 belirtir.

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

JSX'i dönüştür

Çözüm Gezgini içinde proje adına sağ tıklayın ve Komut İstemini Burada Açseçin.
Komut istemine aşağıdaki webpack komutunu girin:

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

Komut istemi penceresinde sonuç gösterilir.

webpack komutunu çalıştırmanın sonuçlarını gösteren ekran görüntüsü

Ö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'nde npm düğümüne sağ tıklayıp npm paketlerini yükleseç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 paketi sürümlerini denetlemek için package.json kullanma hakkında bilgi için bkz. package.json yapılandırma.
Çözüm Gezgini'ndeproje düğümüne sağ tıklayın ve Varolan>Klasör Ekle'yiseçin.
dist klasörünü seçin ve ardından Klasör Seçseçin.

Visual Studio, app-bundle.js ve app-bundle.js.mapiçeren dist klasörünü projeye ekler.
Çevrilmiş JavaScript kodunu görmek için app-bundle.js açın.
Harici olarak değiştirilmiş dosyaların yeniden yüklenip yüklenmeyeceği sorulursa, Tüm Evet'eseçin.

app.tsxdeğ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 derlemek yerine, Visual Studio'dan derleme sırasında JSX'i derleyebilirsiniz.

package.json açın ve dependencies bölümünden sonra aşağıdaki bölümü ekleyin:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Değişikliklerinizi kaydedin.

Uygulamayı çalıştırma

Hata Ayıklama araç çubuğunda, hata ayıklama hedefi olarak web sunucusu (Microsoft Edge) veya web sunucusu (Google Chrome) seçin.

Makinenizde tercih ettiğiniz hata ayıklama hedefinin kullanılabilir olduğunu biliyor ancak bir seçenek olarak görünmüyorsa, hata ayıklama hedefi açılır listesinden ile Gözat'ı seçin. Listeden varsayılan tarayıcı hedefinizi seçin ve VarsayılanOlarak Ayarla'yı seçin.
Uygulamayı çalıştırmak için F5tuşlarına basın, yeşil ok düğmesini seçin veya hata ayıklamayı başlathata ayıklama seçin.

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

Visual Studio başlangıç dosyasını başlatarak uygulamayı başlatır server.js.
Tarayıcıyı ve konsol pencerelerini kapatın.

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

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

server.jsiçinde, kesme noktası ayarlamak için staticPath bildiriminin solundaki oluklara tıklayın:
Uygulamayı çalıştırmak için F5 tuşuna basın veya Debug>Hata Ayıklamayı Başlatseçin.

Hata ayıklayıcı, ayarladığınız kesme noktasında duraklatılır ve geçerli deyim vurgulanır. Artık, geçerli kapsamdaki değişkenlerin üzerine gelerek uygulama durumunuzu incelemek için Locals ve Watch pencereleri gibi hata ayıklayıcı pencereleri kullanabilirsiniz.
Uygulamayı çalıştırmaya devam etmek için F5basın, Hata Ayıklama araç çubuğunda devam devam et'i seçin veya Hata AyıklamaDevamseçeneğini belirleyin.

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

İstemci tarafı React kodunda bir kesme noktası ayarlayın ve kesme noktasına erişin.

Önceki bölümde hata ayıklayıcıyı sunucu tarafı Node.js koduna eklemişsinizdir. İstemci tarafı React kodundaki kesme noktalarına ulaşmak ve onları tetiklemek için hata ayıklayıcıyı doğru sürece bağlamanız 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:

Hata Ayıklama araç çubuğundaki açılan listeden Gözat'ı seçin.
Gözat ekranında, tercih ettiğiniz tarayıcı vurgulanmış olarak Ekleöğesini seçin.
Bağımsız Değişkenler alanına --remote-debugging-port=9222 bayrağını girin.
Tarayıcıya hata ayıklama Edge gibi yeni bir kolay ad verin veyahata ayıklama ile Chrome've ardından Tamamseçeneğini belirleyin.
Gözat ekranında,öğesini seçmek için Gözat seçeneğini tıklayın.

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

Visual Studio düzenleyicisinde, app-bundle.js veya app.tsx kaynak kodunda bir kesme noktası ayarlayın.
- app-bundle.jsiçin, render() işlevinde kesme noktasını ayarlayın. app-bundle.js dosyasındaki render() işlevini bulmak için, Ctrl+F tuşlarına basın veya Düzenle>Bul ve Değiştir>Hızlı Bulseçeneklerinden birini seçin ve arama alanına render girin.
- app.tsxiçin, render() işlevinin içindeki kesme noktasını return deyiminde ayarlayın.
  
  kesme noktasını app.tsxolarak ayarlarsanız, aşağıdaki kodu değiştirmek için webpack-config.js güncelleştirin ve değişikliklerinizi kaydedin.
  
  Bu kodu değiştirin:
```
output: {
    filename: "./app-bundle.js",
},
```
  Bu kodla:
```
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.tsxkaynak dosyasını bulmasını engelleyen webpack:/// ön ekini içerir. Bu ayar, uygulamayı oluştururken kaynak eşleme dosyası app-bundle.js.mapiçinde oluşturulan referansları geçersiz kılar. Özellikle, bu ayar kaynak dosyaya başvuruyu webpack:///./app.tsx'den ./app.tsx'e değiştirir ve bu değişiklik hata ayıklamayı etkinleştirir.
Visual Studio'da hata ayıklama hedefi olarak hedef tarayıcınızı seçin ve ardından CtrlF5tuşlarına basın veya uygulamayı tarayıcıda çalıştırmak için Hata Ayıklama Hata AyıklamaBaş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.
Hata Ayıklama>İşlemEkle'yi seçin veya Ctrl+Alt+Ptuşlarına basın.

Bahşiş

İşleme ilk kez bağlandıktan sonra, Hata Ayıkla>İşleme'e Yeniden Bağlan'ı seçerek veya Shift+Alt+Ptuşlarına basarak hızlı bir şekilde aynı işleme yeniden bağlanabilirsiniz.
İşleme Ekle iletişim kutusunda, ekleyebileceğiniz tarayıcı örneklerinin filtrelenmiş bir listesini alın.

hedef tarayıcınızın JavaScript (Chrome) veya JavaScript (Microsoft Edge - Chromium)için doğru hata ayıklayıcının ekle alanında göründüğünden emin olun. Sonuçları filtrelemek için filtre kutusuna , chrome veya kenar yazın.
Doğru ana bilgisayar bağlantı noktasına sahip tarayıcı işlemini, bu örnekte localhost, seçin. 1337 veya bağlantı noktası numarası, doğru işlemi seçmenize yardımcı olmak için Başlık alanında da görünebilir.
seçekle.

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

Bahşiş

Hata ayıklayıcı eklenmiyorsa ve işleme eklenemiyor iletisini görüyorsanız. İşlem geçerli durumda 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.
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 kesme noktasına veya app.tsxiçindeki eşlenmiş konumuna isabet edebilirsiniz. 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ıklaAdımla'yı seçin ya da F10 veya hata ayıklama.seçin. Kodu çalıştırmaya devam etmek için F5 basın veya Devam Et'i seçin. Temel hata ayıklama özellikleri hakkında daha fazla bilgi için bkz. hata ayıklayıcıya ilk bakış.
- app.tsxiçinde koda erişemiyorsanız, önceki adımlarda açıklandığı gibi hata ayıklayıcıyı bağlamak için İşleme Ekle kullanarak 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 harita dosyanızın, Visual Studio hata ayıklayıcının app.tsx dosyasını bulmasını önleyen webpack:///./app.tsxyerine ./app.tsx dosyasına bir referans içerdiğinden emin olun.
  Alternatif olarak, app.tsxiçindeki debugger; deyimini 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.jsiçinde koda erişemiyorsanız, app-bundle.js.mapkaynak eşleme dosyasını kaldırın.