Debugging Chrome extensions #DevToolsTips

Key Takeaways

[Music] foreign let me look for an extension to help me stay focused when reading documentation oh wow this Oliver Focus mode seems great let me install that oh hey Oliver what are you doing here oh hey jessalyn I'm here to help you get started with this extension and debug is needed along the way oh nice take it away so let me start by telling you what this extension does once you install this extension you can click the extension's action icon when browsing our developer docs to enter Focus mode we'll add some CSS to the page hiding a number of elements and letting you focus on the content cool how do you feel that is an extension a web application not quite they use very similar Technologies HTML CSS and JavaScript but they can be installed by a user from the Chrome web store and have access to special apis that give them additional control over the browser think of them as a way of extending Chrome to make it your own and if you've not built one before we have a number of samples which make for a great starting point just head to the link below I see hang on a minute I have installed the extension it doesn't seem to be working though um I'm sure it worked on my machine well let's debug it together and find out what went wrong first let's load the source code into Chrome I'll head to Chrome colon extensions enable developer mode in the top right and choose load extension I find the folder with my code and load it in ah I can see there's an error already I can click to view the errors here on the extensions page or click service worker to inspect my background context and see exactly what's happening in the console this looks like a typo and an easy fix I just need to make sure the method I'm calling actually exists aha that's how you debug an extension one question though do you need to reload the extension every time you make changes great question for some changes you don't but generally it's a good habit some changes are only picked up when you reload and it also makes sure any initialization logic you've changed can be rerun it's super easy you just need to click this reload button on the Chrome extensions page and you don't even need to close devtools also you might wonder why we're in a separate Dev tools here that's because we're inspecting the extension service worker which is independent of any specific page the UI should hopefully be familiar though I see while we are here is there anything else interesting absolutely on the memory panel I can make sure I'm not using too much memory I can even see what specific data is in memory to make sure there's nothing surprising hey look if I search for developer.chrome.com I can see one of the URLs we have as a variable there's a lot to explore here and we only have so much time today but I'd encourage you to take a look if it interests you oh and don't forget while devtools is open your service worker is kept alive and will never be terminated does it matter if the service worker is alive or terminated yes and no if you're stepping through some code it's helpful for the service worker to stay alive so you don't lose your place but if you want to fully test your extension from a user's point of view it's important to make sure it works correctly when the service worker has been terminated and then wakes back up so when you're testing lifetime Behavior specifically closing devtools can be a good idea I feel like we have learned a lot already somehow the app is still not working why Oliver why hmm maybe there's something wrong with a Content script content script yeah these are scripts injected by the extension into a web page they run directly inside a page although with some isolation from the main JavaScript environment I see let's set a breakpoint to debug our scripts while we're looking at a page in the extension section of developer.chrome.com let's open the sources panel and select the content scripts tab find your extension among the others and then find the script you'd like to debug this is the function that should be running let me add a breakpoint and then toggle the action it does seem to pause let's hover over the message variable ah there's a data property so I need to check if message.data is focused on and not just message let's fix that cool if you want to learn more about breakpoint debugging definitely check out my previous video on that a there is a warning message here what happened yeah devtools ignores content scripts by default which changes how they behave with certain features you can remove this file from the ignore list even better if you regularly debug different content scripts and extensions you can configure devtools to include all content scripts by default nice a small tip here if you frequently use the content scripts tab you can drag it to the front to access it quicker oh nice I honestly didn't know that oh well seems like we have fixed all the issues it's Oliver Focus mode working now I hope so let's give it a try shall we awesome it works let's check it works even if the service worker is terminated we can go to Chrome colon slash service worker Dash internals and terminate our service worker look it's still working I think our job here is done yay thanks for showing us how to debug extensions where can we learn more apart from this video sure you can go to this link to learn the basics of extensions great that's all for today have fun building extensions see you for the next step two tips ciao [Music] thank you