>_ DevTools Console & Bookmarklets
A checklist for creating bookmarklets with your chatbot's help
0 / 0 completed
- Learn that a selector can be:
- A tag (e.g.,
h1, p, div)
- An ID (e.g.,
id="main-content") — unique on the page
- A class (e.g.,
class="article-text") — can appear multiple times
- Right-click the element you want to target on the webpage
- Choose "Inspect" to open DevTools
- Identify the selector (tag, ID, or class) for that element
- Alternatively, click the left-most selector icon in DevTools to select an item on the page
- Copy the selector and some surrounding HTML for context
- Paste the selector and surrounding text into your chatbot
- Describe what you want the code to do
- In this case, copy the text content inside the selected items
- Ask your chatbot for a JavaScript snippet to test in DevTools
- Open DevTools Console (F12 or right-click → Inspect → Console tab)
- Paste the snippet into the console and press Enter
- Copy the text to a new document (Google Doc, Text editor, or gist.github.com, or even into the console)
- If it works → proceed to next section
- If there's an error → copy the error message, paste it back to your chatbot, and repeat
- Ask your chatbot to convert the working snippet into a bookmarklet
- Copy the
javascript:... code your chatbot provides
- Create a new bookmark in your browser
- Give it a short, descriptive name
- Paste the
javascript:... code as the URL
- Drag it to your bookmarks bar for easy access