Skip to content

Commit 9030bf1

Browse files
SamuelAlevforresst
authored and
MachinisteWeb
committed
[cookbook/debugging-in-vs-code] Translated in french (#203)
* [cookbook/debugging-in-vs-code] Translated in french * Apply suggestions from review Co-Authored-By: Forresst <[email protected]>
1 parent d9f7ebd commit 9030bf1

File tree

1 file changed

+32
-32
lines changed

1 file changed

+32
-32
lines changed

‎src/v2/cookbook/debugging-in-vscode.md

+32-32
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
---
2-
title: Debugging in VS Code (EN)
2+
title: Déboguer dans VS Code
33
type: cookbook
44
order: 8
55
---
66

7-
<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.</p>
7+
<p>Chaque application atteint un point où il est nécessaire de comprendre les défaillances, petites ou grandes. Dans ce tutoriel, nous explorons quelques workflows pour les utilisateurs de VS Code qui souhaitent déboguer leur application dans le navigateur.</p>
88

9-
This recipe shows how to debug [Vue CLI](https://github.com/vuejs/vue-cli) applications in VS Code as they run in the browser.
9+
Ce tutoriel montre comment déboguer les applications en utilisant [Vue CLI](https://github.com/vuejs/vue-cli) dans VS Code comme si elles tournaient dans un navigateur.
1010

11-
<p class="tip">Note: This recipe covers Chrome and Firefox. If you know how to setup VS Code debugging with other browsers, please consider sharing your insights (see bottom of the page).</p>
11+
<p class="tip">Note: Ce tutoriel couvre Chrome et Firefox. Si vous savez comment configurer le débogage de VS Code avec d'autres navigateurs, veuillez envisager de partager vos idées (voir en bas de la page).</p>
1212

13-
## Prerequisites
13+
## Prérequis
1414

15-
Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled:
15+
Assurez-vous d'avoir installé VS Code et le navigateur de votre choix, et que la dernière version de l'extension Debugger correspondante est installée et activée :
1616

17-
* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
18-
* [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)
17+
* [Debugger pour Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
18+
* [Debugger pour Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)
1919

20-
Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), following the instructions in the [Vue CLI Guide](https://cli.vuejs.org/). Change into the newly created application directory and open VS Code.
20+
Installez et créez un projet avec la [vue-cli](https://github.com/vuejs/vue-cli), en suivant les instructions de la section [Guide Vue CLI](https://cli.vuejs.org/). Allez dans le répertoire nouvellement créé et ouvrez VS Code.
2121

22-
### Displaying Source Code in the Browser
22+
### Affichage du code source dans le navigateur
2323

24-
Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.
24+
Avant de pouvoir déboguer vos composants Vue à partir de VS Code, vous devez mettre à jour la configuration webpack générée pour construire des sourcemaps. Nous faisons cela pour que notre débogueur ait un moyen de mapper le code d'un fichier compressé à sa position dans le fichier d'origine. Ceci vous permet de déboguer une application même après que vos ressources aient été optimisées par webpack.
2525

26-
If you use Vue CLI 2, set or update the `devtool` property inside `config/index.js`:
26+
Si vous utilisez Vue CLI 2, définissez ou mettez à jour le paramètre `devtool` dans `config/index.js` :
2727

2828
```json
2929
devtool: 'source-map',
3030
```
3131

32-
If you use Vue CLI 3, set or update the `devtool` property inside `vue.config.js`:
32+
Si vous utilisez Vue CLI 3, définissez ou mettez à jour le paramètre `devtool` dans `vue.config.js` :
3333

3434
```js
3535
module.exports = {
@@ -39,13 +39,13 @@ module.exports = {
3939
}
4040
```
4141

42-
### Launching the Application from VS Code
42+
### Lancement de l'application à partir de VS Code
4343

44-
<p class="tip">We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.</p>
44+
<p class="tip">Nous supposons ici que le port est le `8080`. Si ce n'est pas le cas (par exemple, si le port `8080` a été pris et que Vue CLI a choisi automatiquement un autre port pour vous), modifiez simplement la configuration en conséquence.</p>
4545

46-
Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration:
46+
Cliquez sur l'icône Débogage dans la barre d'activités pour afficher la vue Débogage, puis cliquez sur l'icône en forme d'écrou pour configurer un fichier launch.json, en sélectionnant **Chrome/Firefox: Launch** comme environnement. Remplacez le contenu du fichier launch.json généré par la configuration correspondante :
4747

48-
![Add Chrome Configuration](/images/config_add.png)
48+
![Ajout de la configuration de Chrome](/images/config_add.png)
4949

5050
```json
5151
{
@@ -74,37 +74,37 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
7474
}
7575
```
7676

77-
## Setting a Breakpoint
77+
## Définir un point d'arrêt
7878

79-
1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
79+
1. Définissez un point d'arrêt dans **src/components/HelloWorld.vue** à la `ligne 90` où la fonction `data` retourne une chaîne de caractères.
8080

81-
![Breakpoint Renderer](/images/breakpoint_set.png)
81+
![Définition d'un point d'arrêt](/images/breakpoint_set.png)
8282

83-
2. Open your favorite terminal at the root folder and serve the app using Vue CLI:
83+
2. Ouvrez votre terminal favori dans le dossier racine et lancez l'application en utilisant Vue CLI :
8484

8585
```
8686
npm run serve
8787
```
8888

89-
3. Go to the Debug view, select the **'vuejs: chrome/firefox'** configuration, then press F5 or click the green play button.
89+
3. Allez dans la vue Débogage, sélectionnez la configuration **'vuejs: chrome/firefox'**, puis appuyez sur F5 ou cliquez sur le bouton vert de lecture.
9090

91-
4. Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`.
91+
4. Votre point d'arrêt devrait maintenant être atteint dès qu'une nouvelle instance de navigateur ouvre `http://localhost:8080`.
9292

93-
![Breakpoint Hit](/images/breakpoint_hit.png)
93+
![Point d'arrêt en pleine action](/images/breakpoint_hit.png)
9494

95-
## Alternative Patterns
95+
## Modèles alternatifs
9696

9797
### Vue Devtools
9898

99-
There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
99+
Il existe d'autres méthodes de débogage, plus ou moins complexes. Le plus simple et le plus populaire est d'utiliser l'excellent outil Vue.js devtools [pour Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) et [pour Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Certains des avantages de travailler avec les outils Vue.js devtools sont qu'ils vous permettent d'éditer en direct les propriétés des données et de voir les changements se refléter immédiatement. L'autre avantage majeur est la possibilité de déboguer en revenant dans le temps pour Vuex.
100100

101-
![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)
101+
![Debugger Vue.js Devtools dans le temps](/images/devtools-timetravel.gif)
102102

103-
<p class="tip">Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.</p>
103+
<p class="tip">Veuillez noter que si la page utilise une version de Vue.js de production/minifiée (comme le lien standard d'un CDN), l'inspection via Vue.js devtools est désactivée par défaut et le volet Vue n'apparaîtra pas. Si vous passez à une version non minifiée, vous devrez peut-être rafraîchir la page pour les voir.</p>
104104

105-
### Simple Debugger Statement
105+
### La simple instruction Debugger
106106

107-
The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.
107+
L'exemple ci-dessus a un excellent workflow. Cependant, il y a une autre option où vous pouvez utiliser l'[instruction du débogueur natif](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directement dans votre code. Si vous choisissez de travailler de cette façon, il est important que vous vous souveniez d'enlever les instructions lorsque vous avez terminé.
108108

109109
```js
110110
<script>
@@ -123,6 +123,6 @@ export default {
123123
</script>
124124
```
125125

126-
## Acknowledgements
126+
## Remerciements
127127

128-
This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli).
128+
Ce tutoriel est basée sur une contribution de [Kenneth Auchenberg](https://twitter.com/auchenberg), [disponible ici](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli).

0 commit comments

Comments
 (0)