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

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 eğitimde şunları öğreniyorsunuz:

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, önerilen CLI tabanlı proje türünü kullanarak alternatif olarak bir React projesi 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 kılavuz 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'nde 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'nde 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.jsgenel veya yerel yüklemesine başvurmak için Node.exe yolunu 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ştur

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

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

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ı - JavaScript'i seç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ş bir 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 bkz. Önkoşullar.

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

(1) Yeni Proje iletişim kutusunda belirttiğiniz adı kullanarak projeniz kalın olarak vurgulanır. Dosya sisteminde, bu proje proje klasörünüzdeki bir .njsproj dosyayla temsil edilir. Projeye sağ tıklayıp Özellikler'i seçerek (veya Alt + Enter tuşuna basarak) projeyle ilişkili özellikleri ve ortam değişkenlerini ayarlayabilirsiniz. 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 seviyede, varsayılan olarak projenizle aynı ada sahip olan bir çözüm bulunur. Disk üzerindeki bir .sln dosyayla 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 ayarları ve sağ tıklama seçeneklerini 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) Proje dosyaları, server.js gibi proje düğümü altında gösterilir. server.js proje başlangıç dosyasıdır ve bu nedenle kalın yazıyla gösterilir. Başlangıç dosyasını, projedeki bir dosyaya sağ tıklayıp Başlangıç dosyası olarak ayarla Node.js seçerek ayarlayabilirsiniz.

Npm paketleri ekleme

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

Tepki
react-dom
ekspres
path
ts-loader
TypeScript
webpack
webpack-cli

Paket yüklemek için:

Çözüm Gezgini'ndenpm düğümüne sağ tıklayın ve Yeni npm Paketlerini Yükle'yi seçin.
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++ 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'ndekinpm 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.jsonyapıştırabilirsiniz.

Çözüm Gezgini'ndepackage.json Visual Studio düzenleyicisinde 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. Daha fazla bilgi için package.json dosyasını kullanma hakkında bkz. package.json yapılandırması.
Değişiklikleri kaydetmek için Ctrl+S tuşuna 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ükle'yi seçin.

Bu komut, packages.json'de 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'ndekinpm düğümünde görünür.

Uyarı

Komut satırını kullanarak npm paketlerini de yükleyebilirsiniz. Çözüm Gezgini'nde 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.

Çözüm Gezgini'nde proje adını seçin ve Ctrl+Shift+A tuşlarına basın veya proje adına sağ tıklayıpYeni Öğe Ekle'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ı'nı seçin, app.tsx adını yazın ve Ekle veya Tamam'ı seç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 Gezgini'ndeserver.js 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, 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 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.

index.html açın ve bölümünü aşağıdaki kodla değiştirinbody:
```
<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.js dosyasına ekleyin. JSX'i düz JavaScript'e paketlemek ve çevirmek için bir giriş dosyası, app.tsx ve 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'ndewebpack-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 belirtir app.tsx .

Tüm değişiklikleri kaydetmek için Ctrl+ ShiftS+ basın veya Dosya>Tümünü Kaydet'i seçin.

JSX'i dönüştür

Çözüm Gezgini'nde 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.

Ö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ü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 paketi sürümlerini denetlemek için kullanma package.json hakkında bilgi için bkz. package.json yapılandırması.
Çözüm Gezgini'nde proje düğümüne sağ tıklayın veVarolan Klasörü> seçin.
dist klasörünü seçin ve ardından Klasörü Seçin.

Visual Studio, projeyeapp-bundle.js ve app-bundle.js.map içeren dist klasörünü 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ü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. JSX'i, önceki bölümde gösterildiği gibi komut satırında dönüştürmek yerine, Visual Studio içinde derleme sırasında da dönüştürebilirsiniz.

package.json'yı 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çeneğini belirleyin.

Tercih ettiğiniz debug hedefinin makinenizde mevcut olduğunu biliyor ancak bir seçenek olarak görünmüyorsa, debug hedefi açılır listesinden Gözat ile seçeneğini seçin. Listeden varsayılan tarayıcı hedefinizi seçin ve Varsayılan Olarak Ayarla'yı seçin.
Uygulamayı çalıştırmak için F5 tuşuna basın, yeşil ok düğmesini seçin veya Hata Ayıklama> Hata Ayıklamayı Başlat 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, bildirimin sol staticPath kısmındaki olukta tıklayarak bir kesme noktası ayarlayın:
Uygulamayı çalıştırmak için F5 tuşuna basın veya Hata Ayıklama>Hata Ayıklamayı Başlat 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.
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.
Tarayıcıyı ve konsol pencerelerini kapatın.

İstemci tarafı React kodunda kesme noktası ayarlama ve kesme noktasını tetikleme.

Önceki bölümde hata ayıklayıcıyı sunucu tarafı Node.js koduna eklemişsinizdir. İstemci tarafı React kodundaki kesme noktalarına erişmek ve bu noktaları 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 Birlikte Gözat'ı seçin.
Gözat ekranında, tercih ettiğiniz tarayıcı vurgulanmış olarak Ekle'yi seçin.
Bağımsız Değişkenler alanına --remote-debugging-port=9222 bayrağını girin.
Tarayıcıya hata ayıklama ile Edge veya hata ayıklama ileChrome gibi yeni bir kolay ad verin ve tamam'ı seçin.
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

Visual Studio düzenleyicisinde ,app-bundle.js veya app.tsx kaynak kodunda bir kesme noktası ayarlayın.
- app-bundle.jsiçin işlevdeki render() kesme noktasını ayarlayın. render() app-bundle.js dosyasında bulmak için Ctrl+F tuşuna basın veya Düzenle>Bul ve Değiştir>Hızlı Bul'u seçin ve arama alanına render yazın.
- app.tsx için, render() işlevi içindeki return deyiminde kesme noktasını ayarlayın.
  
  app.tsx dosyasında kesme noktasını 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 harita 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 dosyasında üretilen başvuruları geçersiz kılar. Özellikle, bu ayar kaynak dosyaya başvuruyu webpack:///./app.tsx'den./app.tsx olarak değiştirir ve bu da hata ayıklamayı etkinleştirir.
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.
Hata Ayıklama>İşleme Ekle'yi seçin veya Ctrl+Alt+P tuşlarına basın.

Tavsiye

İşleme ilk kez ekledikten sonra, Debug>İşleme Yeniden Bağlan'ı seçerek veya Shift+Alt+P tuşlarına basarak aynı işleme hızla yeniden bağlanabilirsiniz.
İş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.
Bu örnekte, doğru ana bilgisayar bağlantı noktasına sahip tarayıcı işlemini seçin localhost. Doğru işlemi seçmenize yardımcı olması için Başlık alanında localhost numaralı veya bağlantı noktası numarası da görünebilir.
İliştir'i seçin.

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

Tavsiye

Hata ayıklayıcı eklenmiyorsa ve "İşleme eklenemiyor. Geçerli durumda bir işlem yasal değil." iletisini görüyorsanız, 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.tsx dosyasında eşlenen 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 ilerlemek için F11 tuşuna basın veya Hata Ayıklama>İçine Gir'i seçin, ya da F10 tuşuna basın ya da Hata Ayıklama>Üzerinden Geç'i 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ızın webpack:///./app.tsx değil ./app.tsx'e başvuru içerdiğinden emin olun. Bu, Visual Studio hata ayıklayıcının app.tsx dosyasını bulmasını önler.
  Ya da debugger; deyimini app.tsx dosyasında 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 giremiyorsanız kaynak eşleme dosyasını kaldırın app-bundle.js.map.

Sonraki Adımlar

Uygulamayı Linux App Service'e dağıtma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-11