Debugging with Chrome

At this point, if you have experience using the Chrome DevTools, you are good to start debugging. Of course, if this is all relatively new to you, follow the given steps to learn how to debug in DevTools:

  1. Switch your view to the Chrome window we opened in the last section.
  2. Click on the Sources tab of the DevTools window.
  3. Select spawn-at-camera.html or the one you used in your testing.
  4. Scroll down through the HTML and JavaScript until you see the onClick() function.
  5. Click on the line number 229 (229 in the example, but yours may differ), just left of the highlighted code to set a break point. This is also demonstrated in the following excerpt:
Setting a JavaScript break point
  1. Switch back to the device that is running the app. Touch on the screen to spawn an object. When you do this, your app should display a Paused in debugger message at the top and then graciously freeze.
  2. Switch back to your development machine and the Developer Tools window. You will see the app paused at your break point. Now, you can use your mouse to hover over code to inspect variables and anything else you may be debugging.
Feel free to explore setting other break points and even stepping through the code. We will leave it up to the reader to explore more of the DevTools functionality on their own.

Now you can remote debug an AR web app running on your device. This also completes most of our initial basic setup. We can now get into the details of working with AR in 3D, starting in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.239.195