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
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
Geminiとv0による高速プロトタイピング
shinya337
1
270
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
怖くない!はじめてのClaude Code
shinya337
0
400
ゼロからはじめる採用広報
yutadayo
3
970
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
120
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
Operating Operator
shhnjk
1
590
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Designing Experiences People Love
moore
142
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
189
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Building Adaptive Systems
keathley
43
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
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 を使って状態を変更不能に
バグ報告、コードのコントリビュートをお願いします!