Condividi tramite

Esercitazione: Creare un'app Node.js e React in Visual Studio

Con Visual Studio è possibile creare facilmente un progetto Node.js e usare IntelliSense e altre funzionalità predefinite che supportano Node.js. In questa esercitazione viene creato un progetto di app Web Node.js da un modello di Visual Studio. Quindi, si crea una semplice app usando React.

In questa esercitazione si apprenderà come:

  • Creare un progetto di Node.js
  • Aggiungere pacchetti npm
  • Aggiungere codice React all'app
  • Transpile JSX
  • Collegare il debugger

Importante

A partire da Visual Studio 2022, in alternativa è possibile creare un progetto React usando il tipo di progetto basato sull'interfaccia della riga di comando consigliato . Alcune informazioni contenute in questo articolo si applicano solo al tipo di progetto Node.js (.njsproj). Il modello usato in questo articolo non è più disponibile a partire da Visual Studio 2022 versione 17.8 Preview 2.

Prima di iniziare, ecco una rapida domande frequenti per presentare alcuni concetti chiave:

  • Che cos'è Node.js?

    Node.js è un ambiente di runtime JavaScript lato server che esegue codice JavaScript.

  • Che cos'è npm?

    La gestione pacchetti predefinita per Node.js è npm. Gestione pacchetti semplifica la pubblicazione e la condivisione di Node.js librerie di codice sorgente. Gestione pacchetti npm semplifica l'installazione, l'aggiornamento e la disinstallazione della libreria.

  • Che cos'è React?

    React è un framework front-end per la creazione di un'interfaccia utente.

  • Che cos'è JSX?

    JSX è un'estensione della sintassi JavaScript usata in genere con React per descrivere gli elementi dell'interfaccia utente. È necessario eseguire il transpile del codice JSX in javaScript normale prima di poterlo eseguire in un browser.

  • Che cos'è webpack?

    Webpack aggrega i file JavaScript in modo che possano essere eseguiti in un browser e possono anche trasformare o creare un pacchetto di altre risorse e asset. Webpack può specificare un compilatore, ad esempio Babel o TypeScript, per transpile codice JSX o TypeScript in javaScript normale.

Prerequisiti

Per questa esercitazione sono necessari i prerequisiti seguenti:

  • Visual Studio con il workload di sviluppo Node.js installato.

    Se Visual Studio non è ancora stato installato:

    1. Vai alla pagina di download di Visual Studio per installare Visual Studio gratuitamente.

    2. Nel programma di installazione di Visual Studio selezionare il carico di lavoro Node.js sviluppo e selezionare Installa.

      Screenshot che mostra il carico di lavoro Node j s selezionato nel programma di installazione di Visual Studio.

    Se Visual Studio è installato ma è necessario il carico di lavoro Node.js:

    1. In Visual Studio passare a Strumenti di >Ottenere strumenti e funzionalità.

    2. Nel programma di installazione di Visual Studio scegliere il carico di lavoro sviluppoNode.js e selezionare Modifica per scaricare e installare il carico di lavoro.

  • Il runtime di Node.js installato:

    Se non hai il runtime di Node.js installato, installare la versione LTS dal sito Node.js. La versione LTS offre la migliore compatibilità con altri framework e librerie.

    Gli strumenti di Node.js nel carico di lavoro di Visual Studio Node.js supportano sia Node.js versioni dell'architettura a 32 bit che a 64 bit. Visual Studio richiede una sola versione e il programma di installazione Node.js supporta una sola versione alla volta.

    Visual Studio rileva in genere il runtime di Node.js installato automaticamente. In caso contrario, è possibile configurare il progetto per fare riferimento al runtime installato:

    1. Dopo aver creato un progetto, fare clic con il pulsante destro del mouse sul nodo del progetto e selezionare Proprietà.

    2. Nel riquadro Proprietà impostare il percorso Node.exe per fare riferimento a un'installazione globale o locale di Node.js. È possibile specificare il percorso di un interprete locale in ognuno dei progetti Node.js.

Questa esercitazione è stata testata con Node.js 12.6.2.

Creare un progetto

Creare prima di tutto un progetto di app Web Node.js.

  1. Apri Visual Studio.

  2. Creare un nuovo progetto.

    Premere esc per chiudere la finestra iniziale. Digitare CTRL + Q per aprire la casella di ricerca, digitare Node.js, quindi scegliere Applicazione Web vuota Node.js - JavaScript. Sebbene questa esercitazione usi il compilatore TypeScript, i passaggi richiedono di iniziare con il modello JavaScript.

    Nella finestra di dialogo visualizzata scegliere Crea.

    Se il modello di progetto applicazione Web Node.js vuota non viene visualizzato, è necessario aggiungere il carico di lavoro sviluppoNode.js. Per istruzioni dettagliate, vedere Prerequisiti.

    Visual Studio crea la nuova soluzione e apre il progetto.

    Screenshot che mostra il progetto di Node.js in Esplora soluzioni

    Evidenziato in grassetto è il tuo progetto, utilizzando il nome assegnato nella finestra di dialogo Nuovo progetto. Nel file system questo progetto è rappresentato da un file .njsproj nella cartella del progetto. È possibile impostare le proprietà e le variabili di ambiente associate al progetto facendo clic con il pulsante destro del mouse sul progetto e scegliendo Proprietà (oppure premere ALT + INVIO). È possibile eseguire il round trip con altri strumenti di sviluppo, perché il file di progetto non apporta modifiche personalizzate all'origine del progetto Node.js.

    (2) Al livello superiore è una soluzione, che per impostazione predefinita ha lo stesso nome del progetto. Una soluzione, rappresentata da un file di .sln su disco, è un contenitore per uno o più progetti correlati.

    (3) Il nodo npm mostra tutti i pacchetti npm installati. È possibile fare clic con il pulsante destro del mouse sul nodo npm per cercare e installare pacchetti npm usando una finestra di dialogo o installare e aggiornare i pacchetti usando le impostazioni in package.json e fare clic con il pulsante destro del mouse sulle opzioni nel nodo npm.

    (4) package.json è un file usato da npm per gestire le dipendenze dei pacchetti e le versioni dei pacchetti per i pacchetti installati localmente. Per altre informazioni, vedere Gestire pacchetti npm.

    (5) File di progetto come server.js visualizzati sotto il nodo del progetto. server.js è il file di avvio del progetto ed è per questo motivo che viene visualizzato in grassetto. È possibile impostare il file di avvio facendo clic con il pulsante destro del mouse su un file nel progetto e selezionando Imposta come Node.js file di avvio.

Aggiungere pacchetti npm

Per l'esecuzione corretta di questa app sono necessari i moduli npm seguenti:

  • reagire
  • react-dom
  • esprimere
  • sentiero
  • ts-loader
  • TypeScript
  • webpack
  • webpack-cli

Per installare un pacchetto:

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nodo npm e selezionare Installa nuovi pacchetti npm.

  2. Nella finestra di dialogo Installa nuovi pacchetti npm cercare il pacchetto react e selezionare Installa pacchetto per installarlo.

    Screenshot che mostra l'installazione di un pacchetto npm.

    Nella finestra di dialogo Installa nuovi pacchetti npm è possibile scegliere di installare la versione del pacchetto più recente o specificare una versione. Se si sceglie di installare le versioni correnti, ma si verificano errori imprevisti in un secondo momento, provare a installare le versioni esatte del pacchetto elencate nel passaggio successivo.

    La finestra Output nel riquadro inferiore di Visual Studio mostra lo stato di avanzamento dell'installazione del pacchetto. Aprire la finestra Output selezionando Visualizza>Output o premendo Ctrl+Alt+O. Nel campo Mostra output della finestra output selezionare Npm.

    Quando installato, il pacchetto di react appare nel nodo npm in Esplora Soluzioni .

    Il file di package.json del progetto viene aggiornato con le informazioni sul nuovo pacchetto, inclusa la versione del pacchetto.

Invece di usare l'interfaccia utente per cercare e aggiungere il resto dei pacchetti uno alla volta, è possibile incollare il codice del pacchetto richiesto in package.json.

  1. Da Esplora soluzioni , aprite package.json nell'editor di Visual Studio. Aggiungere la sezione dependencies seguente prima della fine del 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"
},

    Se il file ha già una sezione dependencies, sostituirlo con il codice JSON precedente. Per ulteriori informazioni sull'uso del file package.json, consultare la configurazione dipackage.json.

  2. Premere CTRL+S o selezionare File>Salva package.json per salvare le modifiche.

  3. In Esplora soluzioni , fare clic con il pulsante destro del mouse sul nodo npm nel tuo progetto e selezionare Installa pacchetti npm.

    Questo comando esegue il comando npm install direttamente per installare tutti i pacchetti elencati in packages.json.

    Selezionare la finestra Output nel riquadro inferiore per visualizzare lo stato di avanzamento dell'installazione. L'installazione potrebbe richiedere alcuni minuti e potrebbe non essere possibile visualizzare immediatamente i risultati. Assicurati di selezionare Npm nel campo Mostra output da nella finestra Output.

    Dopo l'installazione, i moduli npm vengono visualizzati nel nodo npm in Esplora soluzioni .

    Screenshot che mostra i pacchetti npm installati.

    Nota

    È anche possibile installare pacchetti npm usando la riga di comando. In Esplora soluzioni , fare clic con il pulsante destro del mouse sul nome del progetto e selezionare Apri Prompt dei Comandi Qui. Usare i comandi standard Node.js per installare i pacchetti.

Aggiungere file di progetto

Aggiungere quindi quattro nuovi file al progetto.

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

Per questa semplice app, aggiungere i nuovi file di progetto nella radice del progetto. Per la maggior parte delle app, aggiungi i file alle sottocartelle e regola i riferimenti al percorso relativo di conseguenza.

  1. In Esplora soluzioniselezionare il nome del progetto e premere CTRL+MAIUSC+Aoppure fare clic con il pulsante destro del mouse sul nome del progetto e scegliere Aggiungi>Nuovo elemento.

    Se non vengono visualizzati tutti i modelli di elemento, scegliere Mostra tutti i modellie quindi scegliere il modello di elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento scegliere File JSX TypeScript, digitare il nome app.tsxe selezionare Aggiungi o OK.

  3. Ripetere questi passaggi per aggiungere un file JavaScript denominato webpack-config.js.

  4. Ripetere questi passaggi per aggiungere un file HTML denominato index.html.

  5. Ripetere questi passaggi per aggiungere un file di configurazione JSON TypeScript denominato tsconfig.json.

Aggiungere il codice dell'app

  1. In Esplora soluzioniaprire server.js e sostituire il codice esistente con il codice seguente:

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

    Il codice precedente usa Express per avviare Node.js come server applicazioni Web. Il codice imposta la porta sul numero di porta configurato nelle proprietà del progetto, che per impostazione predefinita è 1337. Se è necessario aprire le proprietà del progetto, fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e selezionare proprietà .

  2. Apri app.tsx e aggiungi il seguente codice:

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

    Il codice precedente usa la sintassi JSX e React per visualizzare un messaggio.

  3. Aprire index.html e sostituire la sezione body con il codice seguente:

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

    Questa pagina HTML carica app-bundle.js, che contiene il codice JSX e React traspilato in JavaScript normale. Attualmente, app-bundle.js è un file vuoto. Nella sezione successiva si configurano le opzioni per eseguire il transpile del codice.

Configurare le opzioni del compilatore Webpack e TypeScript

Aggiungere quindi il codice di configurazione webpack a webpack-config.js. Si aggiunge una semplice configurazione webpack che specifica un file di input, app.tsx, e un file di output, app-bundle.js, per il raggruppamento e il transpiling di JSX in JavaScript puro. Per la transpiling, è anche possibile configurare alcune opzioni del compilatore TypeScript. Questo codice di configurazione di base è un'introduzione al webpack e al compilatore TypeScript.

  1. In Esplora soluzioniaprire webpack-config.js e aggiungere il codice seguente.

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

    Il codice di configurazione webpack indica a webpack di usare il caricatore TypeScript per eseguire la transpilazione del codice JSX.

  2. Aprire tsconfig.json e sostituire il contenuto con il codice seguente, che specifica le opzioni del compilatore TypeScript:

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

    Il codice specifica app.tsx come file di origine.

  3. Premere Ctrl+Shift+S o selezionare File>Salva Tutto per salvare tutte le modifiche.

Transpila il JSX

  1. In Esplora soluzioni , fare clic con il pulsante destro del mouse sul nome del progetto e selezionare Apri Prompt dei Comandi Qui.

  2. Nel prompt dei comandi immettere il comando webpack seguente:

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

    La finestra del prompt dei comandi mostra il risultato.

    Screenshot che mostra i risultati dell'esecuzione del comando webpack.

    Se vengono visualizzati errori anziché l'output precedente, è necessario risolverli prima che l'app funzioni. Se le versioni del pacchetto npm sono diverse dalle versioni specificate da questa esercitazione, ciò può causare errori. Per correggere gli errori, provare a eseguire le operazioni seguenti:

    • Usare le versioni esatte mostrate nel passaggio precedente, se non l'hai già fatto

      In alternativa, se vengono ancora visualizzati errori:

    • Installare le versioni più recenti dei pacchetti npm facendo clic con il pulsante destro del mouse sul nodo npm in Esplora soluzioni e scegliendo Installa pacchetti npm.

    Se una o più versioni del pacchetto sono deprecate e generano un errore, potrebbe essere necessario installare una versione più recente per correggere gli errori. Per informazioni sull'uso di package.json per controllare le versioni dei pacchetti npm, vedere package.json configurazione.

  3. In Esplora Soluzioni , fare clic con il pulsante destro del mouse sul nodo del progetto e seleziona Aggiungi>cartella esistente.

  4. Selezionare la cartella dist e quindi selezionare Seleziona cartella.

    Visual Studio aggiunge la cartella dist , che contiene app-bundle.js e app-bundle.js.map, al progetto.

  5. Aprire app-bundle.js per visualizzare il codice JavaScript transpilato.

  6. Se viene richiesto se ricaricare i file modificati esternamente, selezionare Sì a Tutti.

    Screenshot che mostra una richiesta di caricamento dei file modificati.

Ogni volta che si apportano modifiche a app.tsx, è necessario eseguire nuovamente il comando webpack. Per automatizzare questo passaggio, è possibile aggiungere uno script di compilazione per eseguire la transpile di JSX.

Aggiungere uno script di compilazione per eseguire la transpile di JSX

Le versioni di Visual Studio a partire da Visual Studio 2019 richiedono uno script di compilazione. Invece di transpilare JSX nella riga di comando, come illustrato nella sezione precedente, è possibile transpile JSX durante la compilazione da Visual Studio.

  1. Aprire package.json e aggiungere la sezione seguente dopo la sezione dependencies:

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

  2. Salvare le modifiche.

Eseguire l'app

  1. Nella barra degli strumenti debug selezionare server Web (Microsoft Edge) o Server Web (Google Chrome) come destinazione di debug.

    Screenshot che mostra la selezione di Chrome come destinazione di debug.

    Se si sa che l'obiettivo di debug preferito è disponibile sul computer, ma non viene visualizzato come opzione, selezionare Sfoglia con dall'elenco a discesa dell'obiettivo di debug. Selezionare la destinazione predefinita del browser nell'elenco e selezionare Imposta come predefinito.

  2. Per eseguire l'app, premere F5, selezionare il pulsante freccia verde oppure selezionare Debug>Avvia debug.

    Viene visualizzata una finestra della console di Node.js che mostra la porta di ascolto del debugger.

    Visual Studio avvia l'app avviando il file di avvio server.js.

    Screenshot che mostra l'esecuzione di React in un browser.

  3. Chiudere le finestre del browser e della console.

Impostare un punto di interruzione ed eseguire l'app

I punti di interruzione sono la funzionalità di base e essenziale del debug affidabile. Un punto di interruzione indica dove Visual Studio deve sospendere il codice in esecuzione. È quindi possibile osservare i valori delle variabili, il comportamento della memoria o se è in esecuzione un ramo di codice.

  1. In server.js, fare clic nel margine a sinistra della dichiarazione di staticPath per impostare un punto di interruzione.

    Screenshot che mostra un punto di interruzione impostato per la dichiarazione staticPath in server.js.

  2. Per eseguire l'app, premere F5 oppure selezionare Debug>Avvia debug.

    Il debugger viene sospeso in corrispondenza del punto di interruzione impostato, con l'istruzione corrente evidenziata. A questo punto, è possibile controllare lo stato dell'app passando il puntatore del mouse sulle variabili attualmente incluse nell'ambito, usando finestre del debugger come le finestre variabili locali e Espressione di controllo.

  3. Per continuare a eseguire l'app, premere F5, selezionare Continua nella barra degli strumenti debug oppure selezionare Debug>Continua.

    Se vuoi usare Chrome Developer Tools o F12 Tools per Microsoft Edge, premi F12. È possibile usare questi strumenti per esaminare il DOM e interagire con l'app usando la console JavaScript.

  4. Chiudere le finestre del browser e della console.

Impostare e raggiungere un punto di interruzione nel codice React sul lato client

Nella sezione precedente, hai collegato il debugger al codice Node.js lato server. Per impostare e raggiungere i punti di interruzione nel codice React lato client, è necessario collegare il debugger al processo corretto. Ecco un modo per abilitare un browser e collegare un processo per il debug.

Abilitare il browser per il debug

È possibile usare Microsoft Edge o Google Chrome. Chiudere tutte le finestre per il browser di destinazione. Per Microsoft Edge, chiudere anche tutte le istanze di Chrome. Poiché entrambi i browser condividono la codebase Chromium, l'arresto di entrambi i browser offre i risultati migliori.

Altre istanze del browser possono impedire l'apertura del browser con il debug abilitato. Le estensioni del browser potrebbero impedire la modalità di debug completa. Potrebbe essere necessario usare Gestione attività per trovare e terminare tutte le istanze di Chrome in esecuzione.

Per avviare il browser con il debug abilitato:

  1. Selezionare Sfoglia con dall'elenco a discesa nella barra degli strumenti Debug.

  2. Nella schermata Sfoglia con, con il browser preferito evidenziato, selezionare Aggiungi.

  3. Immettere il flag --remote-debugging-port=9222 nel campo Argomenti.

  4. Assegnare al browser un nuovo nome descrittivo, ad esempio Edge, con debug o Chrome con debuge quindi selezionare OK.

  5. Nella schermata Sfoglia con, selezionare Sfoglia.

    Screenshot che mostra la creazione di un browser Edge con il debug abilitato.

  • In alternativa, è possibile aprire il comando Esegui facendo clic con il pulsante destro del mouse sul pulsante Start di Windows e immettere:

    msedge --remote-debugging-port=9222

    o

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

Il browser inizia con il debug abilitato. L'app non è ancora in esecuzione, quindi la pagina del browser è vuota.

Collegare il debugger allo script lato client

  1. Nell'editor di Visual Studio impostare un punto di interruzione nel codice sorgente app-bundle.js o app.tsx.

    • Per app-bundle.js, impostare il punto di interruzione nella funzione render(). Per trovare la funzione render() nel file app-bundle.js, premere CTRL+F oppure selezionare Modifica>Trova e sostituisci>Ricerca rapidae immettere di rendering nel campo di ricerca.

      Screenshot che mostra un set di punti di interruzione nella funzione di rendering in app-bundle dot j s.

    • Per app.tsx, impostare il punto di interruzione all'interno della funzione render(), nell'istruzione return.

      Screenshot che mostra un punto di interruzione impostato nell'istruzione return della funzione di rendering in app t s x.

      Se imposti un punto di interruzione in app.tsx, aggiorna anche webpack-config.js per sostituire il codice seguente e salva le modifiche.

      Sostituire questo codice:

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

      Con questo codice:

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

      Questa impostazione di sola sviluppo abilita il debug in Visual Studio. Per impostazione predefinita, i riferimenti webpack nel file della mappa di origine includono il prefisso webpack:///, che impedisce a Visual Studio di trovare il file di origine app.tsx. Questa impostazione esegue l'override dei riferimenti generati nel file della mappa di origine, app-bundle.jsmappa, durante la compilazione dell'app. In particolare, questa impostazione modifica il riferimento al file di origine da webpack:///./app.tsx a ./app.tsx, che consente il debug.

  2. Selezionare il browser di destinazione come destinazione di debug in Visual Studio e quindi premere CTRL+F5oppure selezionare Debug>Avvia senza eseguire debugper eseguire l'app nel browser.

    Se è stata creata una configurazione del browser abilitata per il debug con un nome descrittivo, scegliere tale browser come destinazione di debug.

    L'app viene aperta in una nuova scheda del browser.

  3. Selezionare Debug>Collega a processooppure premere CTRL+ALT+P.

    Consiglio

    Dopo aver eseguito il collegamento al processo per la prima volta, è possibile ricollegarsi rapidamente allo stesso processo selezionando Debug>Ricollega al Processo o premendo Shift+Alt+P.

  4. Nella finestra di dialogo Collega a processo ottenere un elenco filtrato di istanze del browser a cui è possibile connettersi.

    Assicurarsi che il debugger corretto per il browser di destinazione, JavaScript (Chrome) o JavaScript (Microsoft Edge - Chromium), venga visualizzato nel campo Collega a. Digitare chrome o edge nella casella di filtro per filtrare i risultati.

  5. Selezionare il processo del browser con la porta host corretta, localhost come mostrato in questo esempio. Il numero di porta 1337 o localhost potrebbe essere visualizzato anche nel campo Titolo per aiutarti a selezionare il processo corretto.

  6. Seleziona Allegare.

    L'esempio seguente mostra una finestra Collega a processo per il browser Microsoft Edge.

    Screenshot che mostra la finestra di dialogo Aggancia a processo.

    Consiglio

    Se il debugger non è collegato e viene visualizzato il messaggio Impossibile connettersi al processo. Un'operazione non è valida nello stato corrente., usare Gestione attività per chiudere tutte le istanze del browser di destinazione prima di avviare il browser in modalità di debug. Le estensioni del browser possono essere in esecuzione e impedire la modalità di debug completa.

  7. Poiché il codice con il punto di interruzione è già stato eseguito, aggiornare la pagina del browser per raggiungere il punto di interruzione.

    A seconda dell'ambiente, dello stato del browser e dei passaggi seguiti in precedenza, è possibile raggiungere il punto di interruzione in app-bundle.js o nella posizione mappata in app.tsx. In entrambi i casi, è possibile esaminare il codice ed esaminare le variabili.

    Mentre il debugger è in pausa, è possibile esaminare lo stato dell'app passando il puntatore del mouse sulle variabili e usando le finestre del debugger. Per eseguire il debug del codice, premere F11 oppure selezionare Debug>Passa dentro, oppure premere F10 oppure selezionare Debug>Passa sopra. Per continuare a eseguire il codice, premere F5 oppure selezionare Continua. Per altre informazioni sulle funzionalità di debug di base, vedere Prima analisi del debugger.

    • Se non è possibile accedere al codice in app.tsx, riprovare a usare Collega al processo per collegare il debugger come descritto nei passaggi summenzionati. Assicurarsi che l'ambiente sia configurato correttamente:

      • Chiudere tutte le istanze del browser, incluse le estensioni di Chrome, usando Gestione attività. Assicurarsi di avviare il browser in modalità di debug.

      • Assicurarsi che il file della mappa di origine includa un riferimento a ./app.tsx e non webpack:///./app.tsx, che impedisce al debugger di Visual Studio di individuare app.tsx.

      In alternativa, provare a usare l'istruzione debugger; in app.tsxo impostare punti di interruzione in Chrome Developer Tools o F12 Tools per Microsoft Edge.

    • Se non è possibile suddividere il codice in app-bundle.js, rimuovere il file della mappa di origine app-bundle.js.map.

Passaggi successivi

Distribuire l'app nel servizio app Linux

  • Last updated on