Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20161215-debugger.html
Search
chikoski
January 10, 2017
Technology
0
46
20161215-debugger.html
chikoski
January 10, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
310
festudy02-wasm
chikoski
1
980
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
720
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Other Decks in Technology
See All in Technology
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Typedesign – Prime Four
hannesfritz
42
2.7k
Being A Developer After 40
akosma
90
590k
Music & Morning Musume
bryan
46
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making Projects Easy
brettharned
116
6.3k
Become a Pro
speakerdeck
PRO
29
5.4k
Rails Girls Zürich Keynote
gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Transcript
debugger.html:React x Redux app built-in Firefox Mozilla Japan N. Shimizu
(
[email protected]
) 【ランサーズ×Mozilla×freee】React実践!勉強会@dots. (2016/12/15)
/4IJNJ[V!DIJLPTLJ ˖ ⛆加㖩ח֮8FC⡲⠓爡ד⫴ְגְתׅ ˖ 'JSFGPY'JSFGPYGPSJ04.%/CMPHQPTUT FUD ˖ 3VTUBTNKT8FC"TTFNCMZ8FC73%FW5PPMT ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅ךָ㥨ֹדׅ
˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
react-vimjs: vimをReactコンポーネントにした例
None
None
Open Source Project
Proudly non-profit, Mozilla makes products like Firefox with a mission
to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)
To ensure the Internet is a global public resource, open
and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
None
debugger.html:再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます •
Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html
Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF%FCVHHJOH1SPUPDPM $ISPNF%FCVHHJOH1SPUPDPM
3FNPUF%FCVHHJOH1SPUPDPM
コマンドライン "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO= TUBSUEFCVHHFSTFSWFS1EFWFMPQNFOU "QQMJDBUJPOT(PPHMF=$ISPNFBQQ$POUFOUT.BD04(PPHMF=$ISPNF= SFNPUFEFCVHHJOHQPSU OPEFJOTQFDUNZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動
コマンドライン OQNJOTUBMMHZBSO HJUDMPOFHJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU DEEFCVHHFSIUNM ZBSOJOTUBMM ZBSOSVO debugger.html のインストールと起動
スタンドアローンで起動した時のランディングページ
デバッグ対象を選択した場合の画面
開発の背景:XULからの移行 • Firefoxは一種のWebアプリケーションです • ブラウザエンジンGeckoの上に、JSとXULで実装されてきました • XUL:XMLベースのコンポーネント記述言語 • JS:みんな大好きJavaScript。コンポーネントの振る舞いを記述します •
c.f. https://github.com/browserhtml/browserhtml • 開発ツールもXURLで実装されてきました、XULかける人は少ない • XULから離れることで、多くの方に開発へ参加いただけるようになります
3FBDUY3FEVYךⵃ欽
目的 ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール
webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン
モジュール 役割 debugger.html デバッガー本体 devtools-client-adapters Remote Debugging Protocolの差異を吸収するアダプター devtools-local-toolbox 開発ツールを開発するためのユーティリティ
devtools-config ログレベルやポート番号など、デフォルトの設定をまとめたもの devtools-modules 開発ツール共有のツールとコンポーネント devtools-sham-modules Shammed DevTools Modules from M-C 関連するモジュール
コンポーネント
2つのモードがあるシングルページアプリケーション • 2つのモード デバッガー デバッグ対象選択
IUUQMPDBMIPTU DISPNFUBCEBCDCDFBBB IUUQMPDBMIPTU OPEFUBCEBCDCDFBBB IUUQMPDBMIPTU SFGPYUBCEBCDCDFBBB chrome-tab / node-tab /
firefox-tabのパラメータが適切であれば、デバッグモードへ
デバッグ対象の選択画面は2つのコンポーネントで構成されています 3PPU -BOEJOH1BHF
"QQ 4QMJU#PY %SBHHBCMF 4PVSDFT 4QMJU#PY %SBHHBCMF 3JHIU4JEF#BS 4PVSDFT5BCT &EJUPS 4FBSDI4PVSDF
デバッガーのコンポーネントの関係
&EJUPS 3JHIU4JEF#BS コンポーネントと実際のビューの対応 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF
Sourcesのサブコンポーネント 4PVSDFT5SFF .BOBHFE5SFF 5SFF
&EJUPS#SFBL1PJOU &EJUPS#SFBL1PJOU 4PVSDF'PPUFS Editorのサブコンポーネント
RightSidebarのサブコンポーネント $PNNBOE#BS "DDPSEJPO #SFBL1PJOUT 'SBNFT 4DPQFT
Flow SFOEFS$FOUFS1BOF \ SFUVSOEPNEJW \DMBTT/BNFDFOUFSQBOF^ EPNEJW \DMBTT/BNFFEJUPSDPOUBJOFS^
4PVSDF5BCT &EJUPS UIJTQSPQTTFMFDUFE4PVSDF UIJTSFOEFS8FMDPNF#PY OVMM 4PVSDF4FBSDI ^ Flowとして処理できるようにReact.DOMを利用して描画ルーチンを記述しています
状態管理
"DUJPO $SFBUPS $PNQPOFOUT 4UPSF 3FEVDFS EJTQBUDI "DUJPO "DUJPO 4UBUF 4UBUF
Redux:ActionをReducerで処理することで、Storeの管理するアプリの状態を変化させるアーキテクチャ
JS NPEVMFFYQPSUTDPOOFDU TUBUF QSPQT \ CSFBLQPJOUT@HFU#SFBLQPJOUT TUBUF
^ EJTQBUDICJOE"DUJPO$SFBUPST BDUJPOT EJTQBUDI #SFBLQPJOUT react-redux を利用してpropsの一部をStoreへ保存
Flow DPOTU*SFRVJSF JNNVUBCMF FYQPSUUZQF#SFBLQPJOUT4UBUF\ CSFBLQPJOUT*.BQTUSJOH #SFBLQPJOU CSFBLQPJOUT%JTBCMFEGBMTF ^
immutable.js を使って状態を変更不能に
バグ報告、コードのコントリビュートをお願いします!