Update: Full instructions are avaiable on Netmonitor Readme to run the Network Monitor in the browser tab.

Firefox Devtools is in progress of modernizing its infrastructure to use the same toolset that modern web developers are familiar with. When talking about modern web developers toolset, I mean React, Redux, Immutablejs, and npm modules.😎

What Firefox Devtools team did last year

Firefox Devtools was no different from Firefox itself. The Devtools panels are written in XUL, an HTML-like syntax language, and use several Firefox internal API called XPCOM or Chrome privileged API(Nothing related to Chrome Browser) to make the browser works.👽

In last year(2016), Firefox Devtools team’s main goal is to convert the code base from XUL to pure HTML. The second goal is convert each tool with React/Redux structure for maintenance. Debugger, Inspector, Web Console are the first batch in the conversion progress. Debugger.html is the very first attempt from Firefox Devtools team to embrace the modern web developers’ toolset. Now new Debugger and Web Console are available in Firefox Nightly🍸

Debugger.html, Perf.html(Performance) has their standalone repository hosted on Github. A developer could use git clone to get the repository, and then do yarn install, yarn start(similar to npm command) to debug the debugger.html/perf.html with any browser’s devtools!🚅

What Run on the Browser tab means?

Run on the Browser tab is a term versus Run inside of the developer panel. Traditionally Devtools are running inside of the browser’s developer panel. But some of new Firefox Devtools support run as normal web pages. Those pages can be opened in a browser tab by any modern browser such as Chrome, Safari, or Edge. The benefit is we can improve Firefox Devtools with any Browser’s Devtools, its an unfair advantage.🚀

We are going to make more Devtools easy to debug and can be used for cross-browser debugging.

Current Status

To replacing the jet engine while still flying is a challenging engineering work. To make it happen, we take several engineering experiments around Devtools.

Here are the projects in progress and where they are hosted from:

What we have done in Netmonitor.html

Ricky Chien and I joined the effort of convert Object Inspector from XUL to HTML. Object Inspector is a more complicated tool to convert, so Object Inspector is still half React and without Redux in the playground.

When the Object Inspector is fully converted to HTML, we shift our focus on convert the next important Devtool: Netmonitor. With Honza, Janda, Steve Chung, and other contributors’ help, at the end of Feb we have reached our first phase tangible goal: Converted the whole Netmonitor panel from XUL to HTML, with React, Redux, and Immutablejs. Now we have confidence that the code base is easy to read and contribute.🤗

Picture: How current Netmonitor looks like

What we plan to do next

We just finished the Netmonitor workweek (Fred, Honza, Ricky) in Taiwan, plenty of discussions have occurred, and we have good progress for what should be going on for the Netmonitor.

Here they are:

• We’ve triaged all new Netmonitor bugs and identify good-first-bugs
• We have Prove-Of-Concept branches to prove we can run netmonitor on the browser tab
• We decide to keep using mozilla-central(The gecko) repo. Beside the current workflow, a developer would able to run yarn start command to debugging Netmonitor on the browser tab with any browser’s devtool.
• We stop Netmonitor.html phase I work immediately (convert XUL to HTML, MVP 100% completed)
• We’ll start Netmonitor.html phase II (To run Netmonitor on a browser tab so that we can debug Netmonitor with any browser’s devtool)
  • All phase II bugs are filed in the Meta-bug

What could expect in the future

Currently, Debugger.html have supported both Firefox and Chrome remote debugging protocols, so Debugger.html could be used to debug Firefox, Chrome, or even Node.js!😮

Since Debugger.html’s pure web stack nature, you can imagine one day the debugger.html can be embedded into some editors(Atom, Visual Studio Code) as plugins, or even in other browsers!😇

Run with different remote debugging protocols is the next step once we make Netmonitor.html run on the browser tab.

與其他人合作🤝使用git版本控制系統時，為了讓最後合併（Merge）的commit好看，常常會需要調整自己的commit。

同時修改一個commit

剛開始工作時一次只修改一個commit，最常用到的命令是：

修改commit訊息(message)

git commit --amend

在commit後加入--amend(修正)參數，可以修改最後一個commit的訊息。

將後續修改合併成一個commit

git rebase -i HEAD~2

將要合併的commit從pick改成s(squish)後儲存，修改commit訊息後，可以得到剩下的一個commit。

同時修改多個commit

到後來為了讓審查(Review)更容易,漸漸開始嘗試在遇到某些較複雜的問題時，在同一個Branch堆疊多個commit的開發方式。

假設手上有3個疊在一起的commit(commit 1,commit 2,commit 3. commit 3是最新的commit), 這時在修改的過程中會遇到的主要問題， 就是現在的修改與最新的commit(commit 3)無關, 但與最前面的commit(commit 1)相關。 這時若想要將現在的修改與之前的commit 1合併，原本常使用的git rebase就不是那麼好用了。

為前面commit的打補釘

要為前面commit的打補釘，可以使用命令

git commit --fixup <commit>

<commmit>代表之前commit(commit 1)的hash。輸入後最新的commit中會出現fixup <commit 1>的註記。

合併所有的補釘

當一系列修改完成後，只要使用命令

git rebase -i --autosquash

儲存後可以得到干淨的commit 1,2,3🤘

修改任何之前的commit訊息

如果只想修改之前的commit訊息，可以用命令

git rebase -i HEAD~3

將pick改成reword，儲存後就可以修改訊息。

參考資料

• GIT tip : Keep your branch clean with fixup and autosquash
• Ammend/Change Previous Git Commit Message

在去年改用Hexo¹架部落格後，由於用Markdown寫起來更方便了，又有Mermaid²語法支援可以快速畫出一些流程圖，因此多寫了幾篇。

在此期間，也陸續為這個部落格加了一些小功能。主要有

• 將Hexo預設的Markdown引擎換成markdown-it，以支援顏文字(emoji)⁹ 🎉
• 加入類似Medium的文章預計閱讀時間 (每篇文章標題下方顯示 x min. read) ⏳
• 支援腳注(footnote)🔗，如下方的參考資料

為了折騰這些功能花了些時間，不知道這樣的投資能不能攤平到下個十年 :p

🔸以下是在改進部落格的過程中發現的一些小知識:

將Hexo預設的Markdown引擎換成markdown-it 🎉

為了要支援 emoji，在網上找到的做法是改用hexo-renderer-markdown-it³引擎並同時安裝markdown-it-emoji⁴ 最後必要的是在_config.yml 裡加入相應的markdown設定⁵

加入類似Medium的文章預計閱讀時間 ⏳

原本我裝的是 hexo-reading-time⁶，整合好後一看，所有中文文章的閱讀時長都短得可以，讓我懷疑它根本沒有支援中文字數計算。後來找一找，才拿可支援中文字數計算的hexo-wordcount⁷來替換掉。隨後又丟了個PR⁸過去來調整預設的閱讀時長，最終才接近想要的效果。

參考資料 📓

• ¹ Hello Hexo
• ² Mermaid, Generation of diagrams and flowcharts from text
• ³ hexo-renderer-markdown-it
• ⁴ markdown-it-emoji
• ⁵ 本Blog的_config.yml
• ⁶ hexo-reading-time
• ⁷ hexo-wordcount
• ⁸ Patch for hexo-wordcount
• ⁹ Complete list of github markdown emoji markup