Guide de débogage du code React : Comment localiser et résoudre rapidement les bogues frontaux

Guide de débogage de code React : Comment localiser et résoudre rapidement les bogues frontaux

Citation :
Lors du développement d'applications React, vous rencontrez souvent une variété de bogues qui peuvent faire planter l'application ou provoquer des erreurs de comportement. Par conséquent, maîtriser les compétences de débogage est une capacité essentielle pour tout développeur React. Cet article présentera quelques techniques pratiques pour localiser et résoudre les bogues frontaux, et fournira des exemples de code spécifiques pour aider les lecteurs à localiser et à résoudre rapidement les bogues dans les applications React.

1. Sélection d'outils de débogage :
Dans les applications React, il existe de nombreux outils qui peuvent nous aider à déboguer le code. Voici plusieurs outils de débogage couramment utilisés :

1. Outils de développement Chrome : les outils de développement fournis avec le navigateur Chrome sont un puissant outil de débogage qui peut déboguer le code React en inspectant les éléments, en affichant les requêtes réseau, en affichant les journaux, etc.
2. Outils de développement React : il s'agit d'un plug-in Chrome qui peut fournir des informations plus intuitives et détaillées au niveau des composants React, ainsi que des fonctions permettant d'observer et de modifier l'état des composants React.
3. Redux DevTools : si votre application utilise Redux comme bibliothèque de gestion d'état, il est très utile d'utiliser Redux DevTools pour déboguer le flux d'état Redux. Il peut vous aider à afficher et à modifier le statut dans la boutique Redux et à consulter le statut historique.

2. Localisation des exceptions des composants React :

1. Utilisez le panneau Éléments des outils de développement Chrome pour vérifier la hiérarchie des composants React et voir si les résultats de rendu sont comme prévu. Vous pouvez déterminer le problème spécifique en vérifiant les accessoires et l'état des composants, ainsi qu'en dépannant les composants susceptibles d'être défectueux.

Exemple de code :
Supposons que nous ayons un composant TodoList qui affiche une liste de tâches.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  function addTodo() {
    setTodos([...todos, { id: Date.now(), text: 'New todo' }]);
  }

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
}

export default TodoList;

Supposons qu'une erreur se produise lors du rendu de la liste de tâches et que le résultat du rendu correspondant ne puisse pas être affiché sur la page. Nous pouvons utiliser le panneau Éléments des outils de développement Chrome pour vérifier s'il existe des exceptions de rendu et voir si le statut et les accessoires sont transmis correctement.

2. Utilisez le panneau de la console Chrome Developer Tools pour afficher les messages d'avertissement et d'erreur dans les composants React. React fournit généralement des messages d'avertissement et d'erreur utiles en mode développement pour nous aider à localiser des problèmes spécifiques.

Exemple de code :
Modifiez le composant TodoList ci-dessus pour générer intentionnellement une erreur lors du rendu de la liste de tâches.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  function addTodo() {
    setTodos([...todos, { id: Date.now(), text: 'New todo' }]);
  }

  // 引发错误：todos.map is not a function
  const renderedTodos = todos.map((todo) => <div key={todo.id}>{todo.text}</div>);

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      {renderedTodos}
    </div>
  );
}

export default TodoList;

Après avoir actualisé la page, vérifiez le panneau de console des outils de développement Chrome et vous pouvez voir le message d'erreur : todos.map n'est pas une fonction. Grâce à ce message d'erreur, nous pouvons localiser l'emplacement où l'erreur s'est produite dans la ligne de code todos.map. todos.map is not a function。通过这个错误信息，我们可以定位到错误发生的位置是在todos.map这一行代码。

三、使用断点调试：

1. 在Chrome开发者工具的Sources面板中，我们可以使用断点调试的功能，将代码执行暂停在某一行。此时，我们可以查看变量的值、调用栈、以及执行上下文等信息，帮助我们定位和解决问题。

示例代码：
在上面的TodoList组件中，我们可以在点击按钮添加待办事项时设置一个断点。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  function addTodo() {
    debugger; // 设置断点
    setTodos([...todos, { id: Date.now(), text: 'New todo' }]);
  }

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
}

export default TodoList;

刷新页面并打开Chrome开发者工具的Sources面板，然后点击按钮。代码会在debugger

3. Utiliser le débogage des points d'arrêt :

2. Dans le panneau Sources des outils de développement Chrome, nous pouvons utiliser la fonction de débogage des points d'arrêt pour suspendre l'exécution du code sur une certaine ligne. À ce stade, nous pouvons afficher la valeur de la variable, la pile d'appels, le contexte d'exécution et d'autres informations pour nous aider à localiser et à résoudre le problème.

Exemple de code :

Dans le composant TodoList ci-dessus, nous pouvons définir un point d'arrêt lorsque vous cliquez sur le bouton pour ajouter une tâche à faire.

import { createStore } from 'redux';

const initialState = {
  todos: [],
  filter: 'all',
};

// 定义reducer函数
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case 'SET_FILTER':
      return {
        ...state,
        filter: action.payload,
      };
    default:
      return state;
  }
}

// 创建store
const store = createStore(reducer);

export default store;

Actualisez la page et ouvrez le panneau Sources des outils de développement Chrome et cliquez sur le bouton. Le code mettra en pause l'exécution au niveau de la ligne debugger. À ce moment, nous pouvons visualiser l'exécution du code ligne par ligne et vérifier si les valeurs des variables sont correctes.

Dans le développement Redux, vous pouvez utiliser Redux DevTools pour déboguer le flux d'état Redux. Grâce à Redux DevTools, nous pouvons afficher et modifier le statut dans le magasin Redux, consulter le statut historique et visualiser l'envoi des actions. 🎜🎜🎜Exemple de code : 🎜Si nous avons un Redux Store, il contient des tâches et des états de filtre. 🎜rrreee🎜Nous pouvons utiliser Redux DevTools pour afficher et modifier les tâches et l'état des filtres, ainsi que l'exécution des actions envoyées. 🎜🎜Conclusion : 🎜En utilisant divers outils et techniques de débogage, nous pouvons rapidement localiser et résoudre les bogues front-end. De la vérification de la structure des composants React, à l'affichage des messages d'avertissement et d'erreur, à l'utilisation du débogage des points d'arrêt et de Redux DevTools, ces méthodes peuvent nous aider à déboguer le code React de manière complète et efficace. La maîtrise de ces compétences améliorera considérablement notre efficacité et nos capacités de débogage dans le développement de React. 🎜

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!