Majority of us just use web, but never think how a web page works. A lot of people never think how these gorgeous web pages are coded or they don’t know any tools to check that.

“Promote openness, innovation & opportunity on the Web” is Mozilla’s mission। To promote the openness Mozilla is introducing a lot of programs, tools and resources. Webmaker is on of those program which aims to teach people how to make web. In this program there is a tool called X-Ray Goggles, by this you can see how a page works, if needed you can edit the page for your own work and publish it.

Working with X-Ray Goggles

X-Ray-Goggles works on web pages so it needs internet connection and you have to install it on your browser (I am sure that your browser is Firefox). Installing X-Ray_Goggles on your Firefox is very easy. Just bookmark the X-Ray-Goggles button on your browser’s bookmark bar from X-Ray-Goggles web site.


You have to bookmark the button just for once, don’t need to do it again and again. Now go to the web page which keen to know how it works and click the X-Ray-Goggle button from the bookmark tool bar. X-Ray-Goggle will start working and the page will look like
See the bottom-left corner and bottom-right coener, you will notice the difference. Code will change at bottom-right corner  When you moze your mouse pointer on a part of that page. Which actually the code of that part. To see the full code or to remix the code click on that part, a pop-up will appear, there you will get two section. One section will contain code (HTML source code) another one will preview the code (What You See on the ) as you see on the browser.

From the advance tab you will the full code in text mode
If you think you need to change any thing from the current page you can change on the code section. When you change the code you can see what changes are happening from the What you see section. For example we are changing the super girl picture with Firefox logo.

If want to the changes on the current page, click on the Commit Changes button. Our remix page looks like

You can see any html code of a page and remix any page like this. To publish your work over the web just press P, a pop-up will appear.
To publish your remix page by mozilla server click on Publish To Internet button. Then you will get a link on a pop-up.


Here it is, your remix page link, share your page with other. If you want to publish your remix page on you own server then click on the View HTML Source button. On a pop-up you will get the code. Copy and paste the code on your server.


Thats it! Share your work with your friend, let them know about this awesome tool, spread the openness.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s