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
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
540
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
Operating Operator
shhnjk
1
590
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building an army of robots
kneath
306
45k
Designing Experiences People Love
moore
142
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Designing for Performance
lara
610
69k
Docker and Python
trallard
44
3.5k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Building Adaptive Systems
keathley
43
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Music & Morning Musume
bryan
46
6.6k
KATA
mclloyd
30
14k
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 を使って状態を変更不能に
バグ報告、コードのコントリビュートをお願いします!