Outreachy internship blog – part 3
For this internship with Mozilla I am a part of the Firefox team called DevTools (developer tools). Developer tools are different tools that help web developers in their process of building web pages and web applications. The tools are part of the browser although not visible to the regular user who is just searching the web. Developer can open the tools by right-clicking anywhere on the page and selecting
Inspect Element . There are several different developer tools, like Inspector, Console, Debugger, etc. I work on the Network Monitor.
What is a Network Monitor?
The Network Monitor shows all the network requests Firefox makes (for example, when it loads a page), how long each request takes, and details of each request. Simply said, one can monitor all the internet traffic between the browser (client) and the web server. When the browser asks for some information – it is a Request. When the web server somewhere out there replies with information – it is a Response.
Image from here.
What is it good for?
I think web developers would give you many different answers. It can help to improve the speed (performance) of web pages, it can help to find out where the information on the webpage comes from, how much information the page receives, it can check for failures…
To keep it simple, here is one simply use case from (my) school boy. His school project was to create a video about something. He wanted to add some “machine” voice to his video so he decided to use google translate since it allows to listen to the translation text. With the help of Network Monitor, he was able to download a voice file, generated by the google translate page.
Here are the steps he took.
- Navigate to google translate and open DevTools.
- Click on Network Monitor.
- Press listen (the speaker symbol) and watch the network traffic. Then in the list of requests, select one with file type mpeg.
- Right click and select
Open in New Tab
- When the new tab opens, right click and select
Save Audio As
And he’s got his “machine” voice that he played in his school project. 🙂
And what is my humble task?
Many web developers would like to adjust the width of different columns that are part of the table in Network Monitor. This feature has been repeatedly asked for, so my internship project is “Implement support for resizeable columns for Network panel in Firefox Developer Tools“.
My internship work consists mostly of:
- reading a lot of code,
- writing code to implement resizing of columns in the table of requests
- testing for functionality
- testing for performance
- reading lots of documentation
- learning constantly
What am I learning?
I am constantly looking something up, refreshing some information or simply trying new things out. Here is a list of some things that I am learning:
- more of React JS and the way Firefox is built
- how to store and load different browser user preferences
- lot of CSS although I still feel like CSS hates me 🙂
- Mercurial version control system (this is a tough one)
- how to use Browser Debugger
- how to use automated tools for testing
- generating and using ssh keys for authentication
- encrypting information in email (for outreachy tax info)
- I am also learning how and when to ask for help.
So that’s it. Hope you now have a better understanding of what it is that I currently work on.