Tutorial: Membuat Node.js dan aplikasi React di Visual Studio

Dengan Visual Studio, Anda dapat dengan mudah membuat proyek Node.js dan menggunakan IntelliSense dan fitur bawaan lainnya yang mendukung Node.js. Dalam tutorial ini, Anda membuat proyek aplikasi web Node.js dari templat Visual Studio. Kemudian, Anda membuat aplikasi sederhana menggunakan React.

Dalam tutorial ini, Anda akan mempelajari cara:

• Buat proyek Node.js
• Menambahkan paket npm
• Menambahkan kode React ke aplikasi Anda
• Transpile JSX
• Melampirkan debugger

Penting

Mulai dari Visual Studio 2022, Anda dapat membuat proyek React menggunakan jenis proyek berbasis CLI yang direkomendasikan. Beberapa informasi dalam artikel ini hanya berlaku untuk jenis proyek Node.js (.njsproj). Templat yang digunakan dalam artikel ini tidak lagi tersedia mulai visual Studio 2022 versi 17.8 Pratinjau 2.

Sebelum memulai, berikut adalah Tanya Jawab Umum singkat untuk memperkenalkan Anda pada beberapa konsep utama:

• Apa itu Node.js?

  Node.js adalah lingkungan runtime JavaScript sisi server yang menjalankan kode JavaScript.

• Apa yang dimaksud dengan npm?

  Manajer paket default untuk Node.js adalah npm. Manajer paket memudahkan untuk menerbitkan dan berbagi pustaka kode sumber Node.js. Manajer paket npm menyederhanakan penginstalan pustaka, pembaruan, dan penghapusan penginstalan.

• Apa itu React?

  React adalah kerangka kerja front-end untuk membuat antarmuka pengguna (UI).

• Apa itu JSX?

  JSX adalah ekstensi sintaks JavaScript yang biasanya digunakan dengan React untuk menjelaskan elemen UI. Anda harus menerjemahkan kode JSX ke JavaScript biasa sebelum dapat berjalan di browser.

• Apa itu Webpack?

  Webpack menggabungkan file JavaScript sehingga dapat berjalan di browser, dan juga dapat mengubah atau mengemas sumber daya dan aset lainnya. Webpack dapat menentukan pengompilasi, seperti Babel atau TypeScript, untuk menerjemahkan kode JSX atau TypeScript ke JavaScript biasa.

Prasyarat

Tutorial ini memerlukan prasyarat berikut:

• Visual Studio dengan beban kerja pengembangan Node.js terinstal.

  Jika Anda belum menginstal Visual Studio:

  1. Buka halaman pengunduhan Visual Studio untuk menginstal Visual Studio secara gratis.

  2. Di alat penginstal Visual Studio, pilih beban kerja pengembangan Node.js, dan pilih Instal.

     

  Jika Anda telah menginstal Visual Studio tetapi memerlukan beban kerja Node.js:

  1. Di Visual Studio, buka Alat>Dapatkan Alat dan Fitur.

  2. Di alat penginstal Visual Studio, pilih beban kerja pengembangan Node.js, dan pilih Ubah untuk mengunduh dan menginstal beban kerja.

• Runtime Node.js terinstal:

  Jika Anda tidak menginstal runtime Node.js, instal versi LTS dari situs web Node.js. Versi LTS memiliki kompatibilitas terbaik dengan kerangka kerja dan pustaka lain.

  Alat Node.js dalam beban kerja Visual Studio Node.js mendukung versi arsitektur Node.js 32-bit dan 64-bit. Visual Studio hanya memerlukan satu versi, dan alat penginstal Node.js hanya mendukung satu versi pada satu waktu.

  Visual Studio biasanya mendeteksi runtime Node.js yang diinstal secara otomatis. Jika tidak, Anda dapat mengonfigurasi proyek untuk mereferensikan runtime yang diinstal:

  1. Setelah Anda membuat proyek, klik kanan node proyek dan pilih Properti.

  2. Di panel Properti, atur jalur Node.exe untuk mereferensikan penginstalan global atau lokal Node.js. Anda dapat menentukan jalur ke interpreter lokal di setiap proyek Node.js Anda.

Tutorial ini diuji dengan Node.js 18.5.0.

Membuat proyek

Pertama, buat proyek aplikasi web Node.js.

1. Buka Visual Studio, dan tekan Esc untuk menutup jendela mulai.

2. Tekan Ctrl+Q, ketik node.js di kotak pencarian, lalu pilih Aplikasi Web Node.js Kosong - JavaScript dari daftar dropdown.

   Meskipun tutorial ini menggunakan pengompilasi TypeScript, langkah-langkahnya mengharuskan Anda memulai dengan templat JavaScript.

   Jika Anda tidak melihat pilihan Aplikasi Web Node.js Kosong, Anda perlu menginstal beban kerja pengembangan Node.js. Untuk instruksi, lihat Prasyarat.

3. Dalam kotak dialog Konfigurasikan proyek baru Anda, pilih Buat.

   Visual Studio membuat solusi dan proyek baru, dan membuka proyek di panel kanan. File proyek server.js terbuka di editor di panel kiri.

4. Lihat struktur proyek di Penjelajah Solusi di panel kanan.

   

   • Di tingkat atas adalah solusi (1), yang secara default memiliki nama yang sama dengan proyek Anda. Solusi, yang direpresentasikan oleh file .sln di disk, adalah kontainer untuk satu atau lebih proyek terkait.

   • Proyek Anda (2), menggunakan nama yang Anda berikan dalam kotak dialog Konfigurasikan proyek baru Anda, disorot dengan cetak tebal. Dalam sistem file, proyek adalah file .njsproj di folder proyek Anda.

     Untuk melihat dan mengatur properti proyek dan variabel lingkungan, tekan Alt+Enter, atau klik kanan proyek dan pilih Properti dari menu konteks. Anda dapat bekerja dengan alat pengembangan lain, karena file proyek tidak membuat perubahan kustom pada sumber proyek Node.js.

   • Node npm (3) menunjukkan paket npm yang diinstal.

     Klik kanan node npm untuk mencari dan menginstal paket npm. Anda dapat menginstal dan memperbarui paket dengan menggunakan pengaturan di package.json dan opsi klik kanan di node npm.

   • Npm menggunakan file package.json (4) untuk mengelola dependensi dan versi untuk paket yang diinstal secara lokal. Untuk informasi selengkapnya, lihat Mengelola paket npm.

   • Project file (5) muncul di bawah node proyek. File startup proyek, server.js, ditampilkan dalam huruf tebal.

     Anda dapat mengatur file startup dengan mengeklik kanan file dalam proyek dan memilih Atur sebagai file startup Node.js.

Menambahkan paket npm

Aplikasi ini memerlukan modul npm berikut untuk berjalan dengan benar:

• react
• react-dom
• ekspres
• jalan
• ts-loader
• typescript
• webpack
• webpack-cli

Untuk menginstal paket:

1. Di Penjelajah Solusi, klik kanan node npm dan pilih Instal Paket npm Baru.

2. Dalam kotak dialog Instal Paket npm Baru, cari paket react, dan pilih Instal Paket untuk menginstalnya.

   

   Dalam kotak dialog Instal Paket npm Baru, Anda dapat memilih untuk menginstal versi paket terbaru atau menentukan versi. Jika Anda memilih untuk menginstal versi saat ini, tetapi mengalami kesalahan yang tidak terduga nanti, coba instal versi paket yang tepat yang tercantum di langkah berikutnya.

   Jendela Output di panel Visual Studio bawah memperlihatkan kemajuan penginstalan paket. Buka jendela Output dengan memilih Tampilkan>Output atau tekan Ctrl+Alt+O. Di bidang Tampilkan output dari jendela Output, pilih Npm.

   Saat diinstal, paket react muncul di bawah node npm di Penjelajah Solusi.

   File package.json proyek diperbarui dengan informasi paket baru, termasuk versi paket.

Alih-alih menggunakan UI untuk mencari dan menambahkan paket lainnya satu per satu, Anda dapat menempelkan kode paket yang diperlukan ke package.json.

1. Dari Penjelajah Solusi, buka package.json di editor Visual Studio. Tambahkan bagian dependencies berikut sebelum akhir file:

   "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"
   },
   

   Jika file sudah memiliki bagian dependencies, ganti dengan kode JSON sebelumnya. Untuk informasi selengkapnya tentang menggunakan file package.json, lihat konfigurasi package.json.

2. Tekan Ctrl+S atau pilih File>Simpan package.json untuk menyimpan perubahan.

3. Di Penjelajah Solusi, klik kanan node npm di proyek Anda dan pilih Instal Paket npm.

   Perintah ini menjalankan perintah npm install secara langsung untuk menginstal semua paket yang tercantum dalam packages.json.

   Pilih jendela Output di panel bawah untuk melihat kemajuan penginstalan. Penginstalan mungkin memakan waktu beberapa menit, dan Anda mungkin tidak segera melihat hasilnya. Pastikan Anda memilih Npm di bidang Tampilkan output dari di jendela Output.

   Setelah penginstalan, modul npm muncul di node npm di Penjelajah Solusi.

   

   Catatan

   Anda juga dapat menginstal paket npm dengan menggunakan baris perintah. Di Penjelajah Solusi, klik kanan nama proyek dan pilih Buka Perintah Di Sini. Gunakan perintah Node.js standar untuk menginstal paket.

Menambahkan file proyek

Selanjutnya, tambahkan empat file baru ke proyek Anda.

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

Untuk aplikasi sederhana ini, Anda menambahkan file proyek baru di akar proyek. Untuk sebagian besar aplikasi, Anda menambahkan file ke subfolder dan menyesuaikan referensi jalur relatif yang sesuai.

1. Di Penjelajah Solusi, pilih nama proyek dan tekan Ctrl+Shift+A, atau klik kanan nama proyek dan pilih Tambahkan>Item Baru.

   Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.

2. Dalam kotak dialog Tambahkan Item Baru, pilih TypeScript JSX File, ketik nama app.tsx, dan pilih Tambahkan atau OK.

3. Ulangi langkah-langkah ini untuk menambahkan file JavaScript bernama webpack-config.js.

4. Ulangi langkah-langkah ini untuk menambahkan file HTML bernama index.html.

5. Ulangi langkah-langkah ini untuk menambahkan File Konfigurasi JSON TypeScript bernama tsconfig.json.

Menambahkan kode aplikasi

1. Di Penjelajah Solusi, buka server.js dan ganti kode yang ada dengan kode berikut:

   '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');
   });
   

   Kode sebelumnya menggunakan Ekspres untuk memulai Node.js sebagai server aplikasi web Anda. Kode mengatur port ke nomor port yang dikonfigurasi dalam properti proyek, yang secara default adalah 1337. Jika Anda perlu membuka properti proyek, klik kanan nama proyek di Penjelajah Solusi dan pilih Properti.

2. Buka app.tsx dan tambahkan kode berikut:

   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'));
   

   Kode sebelumnya menggunakan sintaks JSX dan React untuk menampilkan pesan.

3. Buka index.html dan ganti bagian body dengan kode berikut:

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

   Halaman HTML ini memuat app-bundle.js, yang berisi kode JSX dan React yang diterjemahkan ke JavaScript biasa. Saat ini, app-bundle.js adalah file kosong. Di bagian berikutnya, Anda mengonfigurasi opsi untuk menerjemahkan kode.

Mengonfigurasi opsi pengkompilasi Webpack dan TypeScript

Selanjutnya, Anda menambahkan kode konfigurasi Webpack ke webpack-config.js. Anda menambahkan konfigurasi Webpack sederhana yang menentukan file input, app.tsx, dan file output, app-bundle.js, untuk menggabungkan dan menerjemahkan JSX ke JavaScript biasa. Untuk menerjemahkan, Anda juga mengonfigurasi beberapa opsi pengompilasi TypeScript. Kode konfigurasi dasar ini adalah pengantar Webpack dan pengompilasi TypeScript.

1. Di Penjelajah Solusi, buka webpack-config.js dan tambahkan kode berikut.

   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'
                   }
               }
           ]
       }
   }
   

   Kode konfigurasi Webpack menginstruksikan Webpack untuk menggunakan pemuat TypeScript untuk menerjemahkan JSX.

2. Buka tsconfig.json dan ganti konten dengan kode berikut, yang menentukan opsi pengompilasi TypeScript:

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

   Kode menentukan app.tsx sebagai file sumber.

3. Tekan Ctrl+Shift+S atau pilihFile>Simpan Semua untuk menyimpan semua perubahan.

Menerjemahkan JSX

1. Di Penjelajah Solusi, klik kanan nama proyek dan pilih Buka Perintah Di Sini.

2. Di prompt perintah, masukkan perintah Webpack berikut:

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

   Jendela perintah menunjukkan hasilnya.

   

   Jika Anda melihat kesalahan, bukan output sebelumnya, Anda harus mengatasinya sebelum aplikasi berfungsi. Jika versi paket npm Anda berbeda dari versi yang ditentukan tutorial ini, itu dapat menyebabkan kesalahan. Untuk memperbaiki kesalahan, coba yang berikut ini:

   • Gunakan versi yang tepat yang ditunjukkan pada langkah sebelumnya, jika Anda belum melakukannya

     Atau, jika Anda masih melihat kesalahan:

   • Instal versi terbaru paket npm dengan mengklik kanan simpul npm di Penjelajah Solusi dan memilih Instal paket npm.

   Jika satu atau beberapa versi paket tidak digunakan lagi dan mengakibatkan kesalahan, Anda mungkin perlu menginstal versi yang lebih baru untuk memperbaiki kesalahan. Untuk informasi tentang penggunaan package.json untuk mengontrol versi paket npm, lihat konfigurasi package.json.

3. Di Penjelajah Solusi, klik kanan node proyek dan pilih Tambahkan>Folder yang Sudah Ada.

4. Pilih folder dist, lalu pilih Pilih Folder.

   Visual Studio menambahkan folder dist, yang berisi app-bundle.js dan app-bundle.js.map, ke proyek.

5. Buka app-bundle.js untuk melihat kode JavaScript yang diterjemahkan.

6. Jika diminta apakah akan memuat ulang file yang dimodifikasi secara eksternal, pilih Ya untuk Semua.

   

Setiap kali Anda membuat perubahan pada app.tsx, Anda harus menjalankan ulang perintah Webpack. Untuk mengotomatiskan langkah ini, Anda dapat menambahkan skrip build untuk menerjemahkan JSX.

Menambahkan skrip build untuk menerjemahkan JSX

Visual Studio versi yang dimulai dengan Visual Studio 2019 memerlukan skrip build. Alih-alih menerjemahkan JSX di baris perintah, seperti yang ditunjukkan di bagian sebelumnya, Anda dapat menerjemahkan JSX saat membangun dari Visual Studio.

1. Buka package.json dan tambahkan bagian berikut setelah bagian dependencies:

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

2. Simpan perubahan.

Menjalankan aplikasi

1. Di toolbar Debug, pilih Server Web (Microsoft Edge) atau Server Web (Google Chrome) sebagai target debug.

   

   Jika Anda tahu target debug pilihan Anda tersedia di komputer Anda, tetapi tidak muncul sebagai opsi, pilih Telusuri Dengan dari daftar dropdown target debug. Pilih target browser default Anda dalam daftar, dan pilih Atur sebagai Default.

2. Untuk menjalankan aplikasi, tekan F5, pilih tombol panah hijau, atau pilih Debug>Mulai Penelusuran Kesalahan.

   Jendela konsol Node.js terbuka yang menampilkan port mendengarkan penelusur kesalahan.

   Visual Studio memulai aplikasi dengan meluncurkan file startup, server.js.

   

3. Tutup browser dan jendela konsol.

Mengatur titik henti dan menjalankan aplikasi

Titik henti adalah fitur paling dasar dan esensial dari penelusuran kesalahan yang andal. Titik henti menunjukkan di mana Visual Studio harus menangguhkan kode anda yang sedang berjalan. Anda kemudian dapat mengamati nilai variabel, perilaku memori, atau apakah cabang kode berjalan.

1. Di server.js, klik di gutter di sebelah kiri deklarasi staticPath untuk mengatur titik henti:

   

2. Untuk menjalankan aplikasi, tekan F5 atau pilih Debug>Mulai Penelusuran Kesalahan.

   Penelusur kesalahan dijeda di titik henti yang Anda tetapkan, dengan pernyataan saat ini disorot. Sekarang, Anda dapat memeriksa status aplikasi dengan mengarahkan kubah ke variabel yang saat ini berada dalam cakupan, menggunakan jendela debugger seperti jendela Lokal dan Tonton.

3. Untuk terus menjalankan aplikasi, tekan F5, pilih Lanjutkan di toolbar Debug, atau pilih Debug>Lanjutkan.

   Jika Anda ingin menggunakan Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge, tekan F12. Anda dapat menggunakan alat ini untuk memeriksa DOM dan berinteraksi dengan aplikasi dengan menggunakan Konsol JavaScript.

4. Tutup browser dan jendela konsol.

Mengatur dan menekan titik henti di kode React sisi klien

Di bagian sebelumnya, Anda melampirkan penelusur kesalahan ke kode Node.js sisi server. Untuk melampirkan dan menekan titik henti dalam kode React sisi klien, Anda harus melampirkan penelusur kesalahan ke proses yang benar. Berikut adalah salah satu cara untuk mengaktifkan browser dan melampirkan proses untuk penelusuran kesalahan.

Mengaktifkan browser untuk penelusuran kesalahan

Anda dapat menggunakan Microsoft Edge atau Google Chrome. Tutup semua jendela untuk browser target. Untuk Microsoft Edge, matikan juga semua instans Chrome. Karena kedua browser berbagi basis kode Chromium, mematikan kedua browser tersebut memberikan hasil terbaik.

Instans browser lainnya dapat mencegah browser terbuka dengan penelusuran kesalahan diaktifkan. Ekstensi browser mungkin mencegah mode debug penuh. Anda mungkin perlu menggunakan Task Manager untuk menemukan dan mengakhiri semua instans Chrome yang sedang berjalan.

Untuk memulai browser Anda dengan penelusuran kesalahan diaktifkan:

1. Pilih Telusuri Dengan dari daftar dropdown di toolbar Debug.

2. Pada layar Telusuri Dengan, dengan browser pilihan Anda disorot, pilih Tambahkan.

3. Masukkan bendera --remote-debugging-port=9222 di bidang Argumen.

4. Beri browser nama baru yang mudah dikenali seperti Edge dengan penelusuran kesalahan atau Chrome dengan penelusuran kesalahan, lalu pilih OK.

5. Pada layar Telusuri Dengan, pilih Telusuri.

   

• Atau, Anda dapat membuka perintah Jalankan dengan mengklik kanan tombol mulai Windows, dan memasukkan:

  msedge --remote-debugging-port=9222

  or

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

Browser dimulai dengan penelusuran kesalahan diaktifkan. Aplikasi belum berjalan, sehingga halaman browser kosong.

Lampirkan debugger ke skrip sisi klien

1. Di editor Visual Studio, atur titik henti di kode sumber app-bundle.js atau app.tsx.

   • Untuk app-bundle.js, atur titik henti dalam fungsi render(). Untuk menemukan fungsi render() dalam file app-bundle.js, tekan Ctrl+F atau pilih Edit>Temukan dan Ganti>Temukan Cepat, dan masukkan render di bidang pencarian.

     

   • Untuk app.tsx, atur titik henti di dalam fungsi render(), pada pernyataan return.

     

     Jika Anda mengatur titik henti di app.tsx, perbarui juga webpack-config.js untuk mengganti kode berikut, dan menyimpan perubahan Anda.

     Ganti kode ini:

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

     Dengan kode ini:

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

     Pengaturan khusus pengembangan ini memungkinkan penelusuran kesalahan di Visual Studio. Secara default, referensi Webpack dalam file peta sumber menyertakan awalan webpack:/// , yang mencegah Visual Studio menemukan file sumber app.tsx. Pengaturan ini mengambil alih referensi yang dihasilkan dalam file peta sumber, app-bundle.js.map, saat membangun aplikasi. Secara khusus, pengaturan ini mengubah referensi ke file sumber dari webpack:///./app.tsx ke ./app.tsx, yang memungkinkan penelusuran kesalahan.

2. Pilih browser target Anda sebagai target debug di Visual Studio, lalu tekan Ctrl+F5, atau pilih Debug>Mulai Tanpa Penelusuran Kesalahan, untuk menjalankan aplikasi di browser.

   Jika Anda membuat konfigurasi browser yang mendukung penelusuran kesalahan dengan nama yang mudah diingat, pilih browser tersebut sebagai target debug Anda.

   Aplikasi membuka tab browser baru.

3. Pilih Debug>Lampirkan ke Proses atau tekan Ctrl+Alt+P.

   Tip

   Setelah Melampirkan ke proses pertama kalinya, Anda dapat dengan cepat memasang kembali ke proses yang sama dengan memilih Debug>Lampirkan Ulang ke Proses atau menekan Shift+Alt+P.

4. Dalam kotak dialog Lampirkan ke Proses, dapatkan daftar instans browser yang difilter yang dapat Anda lampirkan.

   Pastikan penelusur kesalahan yang benar untuk browser target Anda, JavaScript (Chrome) atau JavaScript (Microsoft Edge - Chromium), muncul di bidang Lampirkan ke. Ketik chrome atau tepi di kotak filter untuk memfilter hasilnya.

5. Pilih proses browser dengan port host yang benar, localhost dalam contoh ini. Nomor port 1337 atau localhost mungkin juga muncul di bidang Judul untuk membantu Anda memilih proses yang benar.

6. Pilih Lampirkan.

   Contoh berikut menunjukkan jendela Lampirkan ke Proses untuk browser Microsoft Edge.

   

   Tip

   Jika penelusur kesalahan tidak melampirkan dan Anda melihat pesan Tidak dapat melampirkan ke proses. Operasi tidak legal dalam status saat ini., gunakan Task Manager untuk menutup semua instans browser target sebelum memulai browser dalam mode penelusuran kesalahan. Ekstensi browser mungkin berjalan dan mencegah mode debug penuh.

7. Karena kode dengan titik henti sudah dijalankan, refresh halaman browser Anda untuk mencapai titik henti.

   Bergantung pada lingkungan Anda, status browser, dan langkah-langkah mana yang Anda ikuti sebelumnya, Anda mungkin mencapai titik henti di app-bundle.js atau lokasi yang dipetakan di app.tsx. Bagaimanapun, Anda dapat menelusuri kode dan memeriksa variabel.

   Saat penelusur kesalahan dijeda, Anda dapat memeriksa status aplikasi dengan mengarahkan mouse ke atas variabel dan menggunakan jendela penelusur kesalahan. Untuk menelusuri kode, tekan F11 atau pilih Debug>Step Into, atau tekan F10 atau pilih Debug>Step Over. Untuk terus menjalankan kode, tekan F5 atau pilih Lanjutkan. Untuk informasi selengkapnya tentang fitur debug dasar, lihat Tampilan awal debugger.

   • Jika Anda tidak dapat memecah kode di app.tsx, coba lagi menggunakan Lampirkan ke Proses untuk melampirkan penelusur kesalahan seperti yang dijelaskan di langkah-langkah sebelumnya. Pastikan lingkungan Anda disiapkan dengan benar:

     • Tutup semua instans browser, termasuk ekstensi Chrome, dengan menggunakan Task Manager. Pastikan Anda memulai browser dalam mode debug.

     • Pastikan file peta sumber Anda menyertakan referensi ke ./app.tsx dan bukan webpack:///./app.tsx, yang mencegah penelusur kesalahan Visual Studio menemukan app.tsx.

     Atau, coba gunakan pernyataan debugger; di app.tsx, atau atur titik henti di Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge sebagai gantinya.

   • Jika Anda tidak dapat memecah kode di app-bundle.js, hapus file peta sumber, app-bundle.js.map.

Langkah berikutnya

Sebarkan aplikasi ke App Service Linux