Exploration

I’m vibe coding an idea I have and it’s awesome! I’m not there yet with what I want to do but pre-LLM, I never would have gotten out of the starting gate.

I’m creating a browser extension and I actually have something that pops up and does stuff!

It doesn’t do what I set out to at this moment, but in the course of debugging it, (and using AI of course), I’m learning lots!

For instance, here are ways to use DevTools that I never have experienced:

:Vibe Debugging

Although only the old-school way of searching the code for the text gave me a pointer to what I could try next. Which is basically that the text I want is sitting in Javascript after retrieving it from the website. I now need to find this data structure, parse it and draw a graphical representation of it within my extension.

Vibe Debugging

Below is what the AI gave me:

Finding the exact JavaScript code that handles the hiding/showing of text on a complex website like ChatGPT can be challenging, but here’s a breakdown of techniques you can use within Chrome DevTools:

1. Using the Elements Panel to Inspect the HTML Structure:

• Identify the Elements: First, you need to identify the HTML elements that are being hidden or shown. Use the “Select an element in the page to inspect it” tool (the arrow icon in the top left of the DevTools) to click on the text or container you see before it’s hidden, and the area where it appears after it’s shown.
• Observe Style Changes: With the element selected in the Elements panel, look at the “Styles” tab. When you trigger the hide/show action (e.g., by clicking the button), observe how the styles of the element change. Look for changes in properties like:
  • display (e.g., from block to none or vice versa)
  • visibility
  • opacity
  • height or width (if it’s collapsing)
• Find the CSS Rule: If you see a CSS rule changing, click on the link next to the rule in the “Styles” tab. This will take you to the source of that CSS, which might give you clues about the associated JavaScript or the component structure.

2. Using Event Listeners Tab:

• Select the Button: Select the button or element that triggers the hide/show action in the Elements panel.
• Go to the “Event Listeners” Tab: In the right-hand sidebar of the Elements panel, click on the “Event Listeners” tab.
• Examine Click Listeners: Expand the “click” event listener(s). You should see a list of functions that are executed when the button is clicked.
• Follow the Source: Click on the link next to the function name (usually a file name and line number). This will take you directly to the JavaScript code that is being executed when the button is clicked.

3. Setting DOM Modification Breakpoints:

• Select the Element: Select the HTML element that is being hidden or shown in the Elements panel.
• Right-Click: Right-click on the selected element.
• Break on: Hover over “Break on” and select:
  • “subtree modifications”: This will pause execution if any children of the element are added, removed, or have their structure changed.
  • “attributes modifications”: This is particularly useful if the hiding/showing is controlled by adding/removing classes or changing inline styles.
  • “node removal”: If the element is being completely removed from the DOM.
• Trigger the Action: Now, go back to the webpage and trigger the action (click the button) that hides/shows the text.
• Debugger Pause: DevTools should pause execution at the point in the JavaScript code that is making the DOM modification. You can then examine the call stack to see how you got to that point and explore the surrounding code.

4. Searching in the Sources Panel:

• Open the Sources Panel: Go to the “Sources” panel in DevTools.
• Search Files: You can search across all JavaScript files loaded on the page. Use Cmd + Option + F (Mac) or Ctrl + Shift + F (Windows/Linux) to open the global search.
• Search for Keywords: Search for keywords related to the text or the action. This could include:
  • The text content that is being hidden/shown.
  • CSS class names you observed being added or removed (e.g., hidden, active, is-visible).
  • Function names you might have seen in the Event Listeners tab.
  • DOM manipulation methods like style.display, classList.add, classList.remove, setAttribute.

Tips for Navigating Complex Code:

• Minified Code: On production websites, the JavaScript code is often minified and bundled, making it difficult to read. DevTools can often “pretty print” the code (look for the {} icon in the Sources panel) to make it more readable, although variable names might still be shortened.
• Frameworks/Libraries: Websites built with frameworks like React, Angular, or Vue.js might structure their code differently. Understanding the basic principles of the framework can help you navigate the code more effectively.
• Call Stack: When the debugger pauses, examine the “Call Stack” in the right-hand sidebar of the Sources panel. This shows you the sequence of function calls that led to the current line of code.

By combining these techniques, you should be able to narrow down and find the specific JavaScript code responsible for the hiding and showing behavior. Remember to observe the DOM changes and trace back to the JavaScript that caused them.