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
39
20161215-debugger.html
chikoski
January 10, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
200
festudy02-wasm
chikoski
1
900
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
620
Functions in JavaScript
chikoski
1
1k
20171018-WASM
chikoski
2
1.2k
20171002-wejs
chikoski
1
510
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.2k
いまさら振り返るPromise
chikoski
1
470
Other Decks in Technology
See All in Technology
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.1k
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
710
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
250
On Your Data を超えていく!
hirotomotaguchi
2
680
競技としてのKaggle、役に立つKaggle
yu4u
3
1k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
JSON攻略法.pdf
miyakemito
8
5k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Thoughts on Productivity
jonyablonski
58
3.8k
Documentation Writing (for coders)
carmenintech
60
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Code Review Best Practice
trishagee
55
15k
A Tale of Four Properties
chriscoyier
151
22k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Fireside Chat
paigeccino
21
2.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
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 を使って状態を変更不能に
バグ報告、コードのコントリビュートをお願いします!