Bullet Bill’s Excellent Adventure

Featuring JS Console & Google Chrome DevTools

For my JavaScript project I made a spin-off of Flappy Bird and renamed it Bullet Bill’s Excellent Adventure. I found this to be the most challenging project yet. I hit a few bumps in the road dealing with mathematical equations to achieve the perfect sense of gravity and jumping, as well as creating the randomized hole that the character passes through. However, I’m happy to say that it all came together in the end. The other main issue I had while building this game was that my new scores were not being properly pushed to my Rails API Backend, and then displayed in my JavaScript(JS) Frontend. This is where the Console in my Google Chrome DevTools came in very handy.

The main uses of the Google Chrome DevTools Console are to log messages and run JavaScript. Utilizing the Console will help make it clear if your JavaScript code is running properly or not. This includes the Console displaying error messages based on your code. Debugger is another great use of the Console. Dropping debugger in your JS code stops the execution of JavaScript, and calls the debugging function. This allows us to resolve JavaScript errors with max efficiency. Additionally, you can have some fun in the Console. It’s possible to tweak the contents of a web page, and you can experiment with new code.

The Google Chrome DevTools Console can be accessed in a few ways. While on a web page you can either press Ctrl+Shift+I or right-click and click on Inspect.

Once inside the Google Chrome DevTools, click on the double arrows (>>) and select console.

This will bring you to an empty console to have some fun in!

Log Messages

Once inside the console you can log a message in multiple ways. One way to do so is directly in the console that’s now open on the web page. An example would be to set a variable let cat = “Meow”. Next you would enter console.log(cat) which will return Meow in the console.

Another way to log a message in the console is by entering a console.log(“what you want returned”) directly into your JS code. An example using my app would be to insert the code console.log(counter) when the game ends and the New Score Form is displayed. This will print the number of pipes that you have successfully passed in the Google Chrome DevTools Console.

Those are basic examples displaying what you can use console.log() for.

There are many possibilities available with the Google Chrome DevTools Console, some of which were mentioned earlier in this article. For more documentation on available features, visit the Console section of the link posted here. Hopefully this article has given you some insight and new knowledge on what Google Chrome DevTools Console is and what features are available with it. If you would like to clone the repo for my game and try it out yourself, it can be found here. Thank you for your time, good luck with your console adventures!