Links
Comment on page

Open the Page Editor

You'll access the Page Editor from the Chrome DevTools.

1. Open the Chrome DevTools

To open the Page Editor, right-click on any web page to open the Context Menu.
Click Inspect, the last option at the bottom, to open the Chrome DevTools.
🤖 You can also open the console with a few keyboard shortcuts
  • Windows: Control + Shift + I
  • Mac: Command + Option + J, or use F12
Although it looks a little scary, we’ll fix it fast!

2. Move the Dock to the Bottom

First, change the dock to appear at the bottom of the screen, rather than the right side. Chrome might open the DevTools panel along your browser's left, right, or bottom side. You'll want your dock on the bottom because the Page Editor's layout is optimized for a horizontal layout. If that's not its default position, you can easily change it. Click the three dots in the panel's top right corner, after the gear icon and before the “X”.
Then, select the second to last option for Dock side.

3. Find the PixieBrix tab.

Finally, select the PixieBrix tab in the top toolbar of the Dev Console.
Don't see it? You might need to click the >> icon at the end of the tabs.
Now, you’ve made it to the PixieBrix Page Editor! Your screen will look something like this.
Chrome will not show the PixieBrix Page Editor (or any other DevTool extensions) on Chrome Web Store URLs, or from the Extension Console.
This is what the whole process looks like:
Excellent work! Now you’re ready to dive into the Page Editor Components.