Comment exécuter le code frontal de Webstorm-webstorm-php.cn

Comment exécuter le code frontal de Webstorm

下次还敢

Libérer： 2024-04-08 17:06:21

original

1302 Les gens l'ont consulté

Les étapes pour exécuter du code frontal dans WebStorm incluent : la création d'un projet et l'écriture de fichiers HTML. Exécutez le serveur LiveEdit. Prévisualisez le code dans le navigateur. Ajoutez des points d'arrêt et déboguez votre code.

Comment exécuter le code frontal de Webstorm

Comment exécuter du code frontal dans WebStorm

Étape 1 : Créer un projet

Ouvrez WebStorm et créez un nouveau projet.
Sélectionnez le modèle "Projet vide".

Étape 2 : Écrire un fichier HTML

Créez un fichier HTML dans le projet, tel que "index.html".
Incluez la structure HTML de base suivante dans le fichier :

<code class="html"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web App</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html></code>

Copier après la connexion

Étape 3 : Exécuter LiveEdit Server

Dans la barre d'outils de WebStorm, recherchez le bouton "Exécuter".
Sélectionnez le type de serveur "LiveEdit".
Cliquez sur le bouton "Démarrer".

Étape 4 : Aperçu dans le navigateur

Après le démarrage du serveur LiveEdit, WebStorm ouvrira le fichier "index.html" dans le navigateur.
Vous pouvez afficher et interagir avec votre code dans le navigateur.

Étape 5 : Déboguer le code

Dans le fichier HTML, ajoutez un point d'arrêt.
Déclenchez des points d'arrêt dans le navigateur, par exemple en cliquant sur un bouton.
WebStorm suspendra l'exécution et vous permettra d'inspecter les variables, les traces de pile et le flux d'exécution.

Autres conseils :

WebStorm fournit une prise en charge LiveEdit prête à l'emploi sans aucune configuration supplémentaire requise.
Vous pouvez personnaliser les paramètres du serveur LiveEdit, tels que le port et le répertoire racine, dans la configuration "Exécuter".
WebStorm prend également en charge d'autres environnements d'exécution tels que Node.js et React Native.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!