Inspect Element, Win the Game!
I’m a Python #CodeNewbie and have no experience with web development — well, except for a lot of copying and pasting I did with JavaScript for an Unbounce landing page. For the most part how a site is made is still very mysterious to me. However, I recently found that even with my limited knowledge, I can still have some power over the web.
I LOVE video game and I use them to relax (Homescapes & Game of Dice) as well as to challenge myself in a fun way (Calculator: The Game & Can You Escape). While my passion for gaming started with consoles such as the PlayStation and GameCube, over the last 7 years or so I’ve transitioned to solely playing mobile games. With me constantly moving homes and my college student budget, I found them easier to enjoy in terms of time and finances. However, over the past few weeks, I found myself becoming bored with all of the mobile games out there — especially with the ones I was using to stimulate my brain. I started to feel like I had already played what was seemingly worth playing — I can’t tell you how many times a game I beat years ago is featured on the latest ‘Must Try’ lists — and things that used to be challenging for me weren’t anymore.
I pondered what to do and finally came to a decision. Find a new hobby? No way! Instead, I decided to dive into the realm of computer games. Strategy games are one of my favorites and after a quick search session I stumbled upon something wonderful: Bob the Robber 4 on Miniclip.
The game involves you playing as Bob as he cut wires to disable security lasers and attempts to get away with stolen goods before the detective arrives. I was hooked right away and went through the first few levels in minutes. As the difficulty progressed I noticed that certain actions were being timed.
As you can tell from this screenshot, taken while I was playing the game, some of the gameplay information was chopped off. I can’t tell how long I’ve taken so far, how much cash I’ve earned, and, most importantly, how long I have until the detective arrives!
Unfortunately, the cut-off was caused by ads that I couldn’t remove. I continued to play (and beat) a few more levels until this minor annoyance started to affect my gameplay. I thought that nothing could be done and was disappointed that I would have to stop playing this otherwise fun game. A friend, seeing my frustration, asked me what was wrong. I told him and in about 5 minutes he taught me how to fix my problem with Chrome’s DevTools! Here’s how I got my screen to look like the photo below:
1. To open up Chrome’s DevTools, I right-clicked on the page to reveal a menu. Then I clicked ‘Inspect’.
2. There’s a lot going on in here, but I want to focus on fixing the game. To find out where the relevant code for the game lives, we need to click on the button that has a cursor in a box. If you hover over this icon, hint text pops up that reads: select an element in the page to inspect it’. I’ve highlighted the button with a red box in the photo below:
3. I hovered over the game and this led me right to the code I needed (see image below). At first I tried playing around with the height of the ‘canvas’ div and that made things worse. I found that it only stretched or squashed the game, yet the part I needed remained cut off. I hit gold with my next try when I adjusted the height of the ‘gameContainer’ div. The ad was still there but settling on a height of 570px meant that I was able to see all the game information that I needed.
And that’s it! It was really exciting being able to manipulate the website to fit my needs. For now, I’ll put it up there with the first time I successfully used my terminal I have since beat Bob the Robber 4 and found that there’s several mobile versions of the series (some habits are hard to break).
Have you used Chrome’s DevTools (or any other browser inspection tools) to solve a problem you were having? Anything from beginner to advanced, I’d like to hear about it. Tweet me @life_of_a_gypsy or leave a comment below.
