reactnative/04-debugging.html at master · pjehan-teaching/reactnative · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<section id="debugging">

    <section>
        <h2>Debugging</h2>
    </section>

    <section>
        <h2>Afficher le menu sur le smartphone</h2>
        <p>Pour afficher le menu de debug sur le smartphone, il faut le secouer plusieurs fois.</p>
        <ul>
            <li><strong>Simulateur</strong> iOS : Cmd + D</li>
            <li><strong>Emulateur</strong> Android : Cmd + M</li>
        </ul>
        <footer>
            <a href="https://docs.expo.dev/debugging/runtime-issues/" class="info" target="_blank">Debugging</a>
        </footer>
    </section>

    <section>
        <h3>React Developer Tools</h3>
        <p>Installer globalement...</p>
        <pre><code class="language-shell">npm install -g react-devtools
react-devtools</code></pre>
        <p>... ou bien localement</p>
        <pre><code class="language-shell">npm install --save-dev react-devtools</code></pre>
        <p>Ajouter ensuite <code class="language-js">"react-devtools": "react-devtools"</code> dans les scripts du fichier package.json</p>
        <pre><code class="language-shell">npm run react-devtools</code></pre>
        <footer>
            <a href="https://facebook.github.io/react-native/docs/debugging#react-developer-tools" class="info" target="_blank">React Developer Tools</a>
        </footer>
    </section>

    <section>
        <h3>Nuclide</h3>
        <div class="container">
            <div class="col">
                <p><a href="https://nuclide.io" target="_blank">Nuclide</a> est un package Atom utilisé par Facebook pour développer des applications JavaScript.</p>
                <ul>
                    <li>Autocomplétion et gestion des types avec Flow</li>
                    <li>Debugging (points d'arrêt, inspection des variables...)</li>
                    <li>Inspection des composants (similaire à Google Chrome)</li>
                    <li>Développement à distance (en utilisant un mot de passe ou une clé SSH)</li>
                </ul>
            </div>
            <div class="col">
                <img src="/assets/images/nuclide.png" alt="Nuclide">
            </div>
        </div>
        <footer>
            <a href="https://blog.atom.io/2018/12/12/facebook-retires-nuclide-extension.html" class="danger" target="_blank">Ce package est abandonné depuis décembre 2018</a>
        </footer>
    </section>

</section>