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.

Can't find the PixieBrix tab? Check out the Troubleshootingtips at the end of this page.

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.

Troubleshooting

If you can't find the Page Editor, try these troubleshooting tips.

Check for hidden tabs

If you've opened the Chrome Dev Tools (how?) and don't see the PixieBrix tab, you might need to click the >> icon at the end of the tabs.

Still don't see it? Keep reading!

Make sure you've got the Extension installed.

Head to app.pixiebrix.com and confirm that you see a button that says Open Extension Console.

✅ Extension has been installed if you see this:

If it says Install from Chrome Web Store, like the screenshot below, you need to install the Chrome Extension. Click the button from the Admin Console to install.

🛑 Extension has NOT been installed if you see this:

Still don't see PixieBrix in the Chrome Dev Tools?

Go to an extension-accessible page

You cannot access the Page Editor from a blank new tab page or certain pages, like the Extension Console.

To see if you're on a page that PixieBrix can't access, click the PixieBrix icon in the Chrome Extension section of your URL bar.

✅ If the sidebar opens, you're on a page that PixieBrix can access!

🛑 If you see a modal that says PixieBrix mods cannot run on this page, then you'll need to go to another page to access the Page Editor.

Try visiting another page, like Linkedin, GitHub, Wikipedia, or even the PixieBrix website.

Still having issues?

Pick one of the following ways to get support:

• Join the PixieBrix Slack Community and post in the #learning channel

• Click the purple chat icon in the bottom left of this page

• Send an email to [email protected]