Debugging JavaScript in Chrome with frames

When debugging JavaScript on a page with frames, it’s easy to find yourself running commands in the console in the wrong frame. I’ve hit this wall many times and wondered why I can’t see the variables that are clearly defined in my JavaScript. Thus, when working on a page with frames, I prefer to load the frame all by itself. This avoids complicating the page with (often unrelated) concerns of other frames.

But sometimes loading the single frame you’re testing is not possible or desirable, such as when you need to code and test interactions between frames. In these instances it’s important to check the target frame selection at the bottom of Chrome:

Chrome frame selection

Chrome frame selection

This setting tells Chrome “Here’s the frame I want to work with in the console.”

Subscribe to Email Updates (No spam. Just new posts.)

One thought on “Debugging JavaScript in Chrome with frames

  1. Pingback: Debugging frames | Chrome Dev Tools