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
はじめてのconsole.log
Search
Edward Fox
February 07, 2017
Technology
4
4.4k
はじめてのconsole.log
20170207
Meguro.es #8 発表資料
Edward Fox
February 07, 2017
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
700
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
90
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
98
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
230
TableauLangchainとは何か?
cielo1985
1
150
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
SREのためのeBPF活用ステップアップガイド
egmc
2
900
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
240
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Music & Morning Musume
bryan
46
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fireside Chat
paigeccino
37
3.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Docker and Python
trallard
45
3.5k
Designing for Performance
lara
610
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
͡Ίͯͷconsole.log EDWARD FOX @Meguro.es 2017/02/07
Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,
AWS - Vue.js, HTTP/2, WebAssembly
ಥવͰ͕͢Έͳ͞Μ
console.logɺͯ͠·͔͢ʁ
JSΛॻ͘ਓͰ console.logΛ࣮ߦͨ͜͠ͱ ͕ͳ͍ਓ͍ͳ͍Ͱ͢ΑͶ
ࠓ͢͜ͱ
consoleΦϒδΣΫτͷ ศརؔʹ͍ͭͯ
- console.tableͱ͔ - console.profileͱ͔
৭ʑ͋ΔͷͰάά͍ͬͯͩ͘͞
͓ΘΓ
Ͱͳ͘
ϒϥβͷΠϯεϖΫλʹ console.log(‘foo’)ͱೖྗͯ͠ ͔Βɺfooͱग़ྗ͞ΕΔ·Ͱ
None
None
ௐΔํ๏
1.ϒϥβͷιʔείʔυಡΉ 2. ϒϥβΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠͏
1.ϒϥβͷιʔείʔυಡΉ 2. ϒϥβΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠͏
ରWebKit ʢͷϛϥʔϦϙδτϦʣ https://github.com/WebKit/ webkit
C++ॳ৺ऀ͕งғؾͰಡΜ ͩͷͰɺؒҧ͍ͬͯͨΒڭ ͍͑ͯͩ͘͞ && ͍ͩͿં͍ͬͯΔͷ Ͱɺͦͷล͝צหΛ
ۦ͚Ͱ͍͖·͢
Ͳ͔͜ΒಡΉ͖͔ Θ͔Βͳ͍
ೖྗΛड͚औΔʹ ΠϯεϖΫλͷUI͕ඞཁ
WebInspectorUI
jsͰॻ͔Ε͍ͯΔ͔Β ׂͱαΫαΫಡΊΔ
ConsoleObserver͕ ϢʔβʔͷೖྗΛ ࢹ͍ͯ͠Δ
ೖྗΛؔ͢Δͱ LogManagerʹॲཧΛҕৡ
LogManager.messageWasAdded()
͜ͷmessageΛड͚औΔ ΠϯλʔϓϦλʔ͕͍Δ ͦͷ໊Interpreter
Interpreter͔Βઌ C++Ͱॻ͔Εͨ ϒϥβͷωΠςΟϒ࣮
Interpreter UI͔ΒͷೖྗΛ callFrameͱͯͬͯ͠Δ
callFrame = InterpreterΛ ίʔϧͨ͠ɺJSͷίʔυ ͦͷ࣮ߦڥͳͲ
InterpreterͰɺeval͕ؔ callFrameΛड͚औͬͯධՁ JSValueܕͷΛฦ͢
͜ͷͱ͖ ࣮ߦڥͷείʔϓʹͱ͍ͮͨ LexicalGlobalObjectͳͲੜ strict modeͰͷ࣮ߦͱ͔ ͜ͷ࣌Ͱผͯ͠ॲཧΛม͑Δ
console.logͱ͍͏ JSͷίʔυΛC++ͷؔʹ Ϛοϐϯάͯ͠ ࣮ߦ͢Δඞཁ͕͋Δ
େྔͷϚΫϩ
None
None
None
putDirectNativeFunction- WithoutTransition()
JSίʔυͷ࣮ߦঢ়ଶΛࣔ͢ ExecStateΛͱʹ࣮ߦ
JSC_HOST_CALLͱ͍͏ ϚΫϩ͕͋Δ if CPU(X86) && COMPILER(GCC_OR_CLANG) Έ͍ͨͳίʔυ͋ͬͯ ຯΘ͍ਂ͍
͔͜͜Βઌ ConsoleObjectΫϥε ͷίʔυΛ͍·͢
͞Βʹۦ͚Ͱ
consoleProtoFuncLog()
consoleLogWithLevel()
logWithLevel()
messageWithTypeAndLevel()
WTFLogAlways()
vprintf_stderr_with_trailing_ newline()
ʢϝιου໊ͷงғؾ͕ มΘͬͨ…ʁʣ
vprintf_stderr_common()
logToStderr()
fputs()
…!!!
ʹ͡Έग़Δ ϨΠϠʔײ
͕͜͜࠷ਂ෦͔ʁ
fputs()ͷ࣮ WebKitʹͳ͍
C++ʹ༻ҙ͞Ε͍ͯΔؔ
> ϑΝΠϧϙΠϯλfpʹ จࣈྻstrΛग़ྗͯ͠ ޭ͢ΕෛͰແ͍Λ ΤϥʔͰ͋ΕEOF(-1)Λฦ͢
ͭ·Γ
fputs()͢Δͱ ϑΝΠϧʢ͔Կ͔ʣͷ ग़ྗ৭Μͳͱ͜ΖΛ ܦ༝ͯ͠Χʔωϧͷ γεςϜίʔϧΛ࣮ߦ͢Δ
ग़ྗ͞Εͨ༰ ίʔϧ͞ΕͨؔΛ ͔͞ͷ΅ͬͯΛฦ͢
None
console.log(‘foo’) —— ೖྗͱೖྗΛड͚औΔڥք WebInspector ConsoleObserver LogManager messageWasAdded —— JSͱC++ͷڥք Interpreter#eval
JSC_NATIVE_FUNCTION_WITHOUT_TRANSITION JSFunction::Create consoleProtoFuncLog consoleLogWithLevel logWithLevel messageWithTypeAndLevel printConsoleMessageWithArguments WTFLogAlways vprintf_stderr_with_trailing_newline vprintf_stderr_common logToStderr fputs —— C++ͱCͷڥք? many C++ & C implementations —— CͱΧʔωϧͷڥք? Kernel system call
console.log(‘foo’) —— ೖྗͱೖྗΛड͚औΔڥք WebInspector ConsoleObserver LogManager messageWasAdded —— JSͱC++ͷڥք Interpreter#eval
JSC_NATIVE_FUNCTION_WITHOUT_TRANSITION JSFunction::Create consoleProtoFuncLog consoleLogWithLevel logWithLevel messageWithTypeAndLevel printConsoleMessageWithArguments WTFLogAlways vprintf_stderr_with_trailing_newline vprintf_stderr_common logToStderr fputs —— C++ͱCͷڥք? many C++ & C implementations —— CͱΧʔωϧͷڥք? Kernel system call
None
None
Θ͔ͬͨ͜ͱ
ϒϥβڊେͳ ϥϯλΠϜ+ίϯύΠϥ
[native code] ා͘ͳ͍
None
None
͓·͚ ʢ࣌ؒ͋ͬͨΒʣ
WebKitͷ δϫδϫ͘Δͱ͜Ζ
1. UIͷ෦͕es6Ͱ ॻ͔Ε͍ͯΔ
= 1ͭͷϦϙδτϦʹ es6ࣗମͷ࣮ͱ es6ͷίʔυͱ es6ͷlintϑΝΠϧ͕͋Δ
2. UIͷ෦ͷjsίʔυ͕ ͚ͬ͜͏console.assertΛ ͍ͬͯΔ
= ΫϥΠΞϯτͰى͖Δࣄ ৴༻Ͱ͖ͳ͍͠ ҉తͳܕมා͍͠ = ͦ͏ͩconsoleʹ ศརͳؔ͋Δ͔Β ͬͪΌ͓͏ͥ
3. rubyͱ͔pythonͷ εΫϦϓτ͕ͨ·ʹ͍Δ
= ։ൃऀ͕༻ҙͨ͠ Ϗϧυσόοά༻ͷ εΫϦϓτͳͲ = ͨͿΜ։ൃऀͷΈʹΑͬͯ rubyͱ͔pythonͰॻ͔Ε͍ͯΔ
͓͠·͍