Open the Page Editor
Last updated
Last updated
You'll access the Page Editor from 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!
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.
Finally, select the PixieBrix tab in the top toolbar of the Dev Console.
Can't find the PixieBrix tab? Check out the Troubleshooting tips 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.
If you can't find the Page Editor, try these troubleshooting tips.
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!
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?
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.
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]
