Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Write to the Console Log in a React Native App

    Chris AchardChris Achard
    react-nativeReact Native
    chrome-devtoolsChrome DevTools
    javascriptJavaScript
    androidAndroid
    iosiOS

    We’ll turn on remote debugging in the simulator, and log values to the console. We’ll also look at the differences between log, warn and error, and turn off the yellow warning box in the simulator itself.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: We have a live search box that filters a list of restaurants, but it might be nice to see how it's actually working by logging some values to the console as we type.

    Start by enabling the developer menu by pressing command D for the iOS simulator on a Mac, command M for the Android simulator on a Mac, and control M on Windows or Linux.

    You can also bring it up by shaking the simulator through the menu. Shaking the device even works to bring up the developer menu on a physical device. Now, with the developer menu up, select debug JS remotely.

    The bundle will reload in the simulator and a web browser will open with some information about React native JavaScript code. On the browser tab, you can open the developer tools and make sure it's on console.

    Then here, just like for web development, we can see the console output. You can already see some info from the running app. Then we can log info to the screen just like console on the web.

    Back in the render method of app, we can log the current value of search in the state. If we rerun that and search for something, then we can see the state changing. We can also use console.warn just like console.log.

    When we run that and search for something, we can see the console.warn statement both as a yellow box in the simulator, and as a yellow background message in the console.

    If you don't like that yellow box on the simulator itself, we can turn it off. Go to index.js and type console.disableYellowBox equals true. Now when we run that, you can see the warnings in the console, but not the app itself.

    We can use log and warn, and also console.error. Now when we rerun, we get a big red error screen as well as a red background error in the console. The red error screen in the app has some interesting properties.

    First, the stack trace here is interactive, which means you can click into one of the file references and it will jump to that line of code. Even if the line is outside of your code and in React native itself, it will open right to that line in that stack.

    The red box also signals a runtime error. You can dismiss it and continue running, and the app continues to work. Since we are logging an error on every render, if we change the search string, we'll hit the error again.