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
89
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
97
フロントエンド開発の落とし穴 / 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
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
580
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
100
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
130
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
210
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
Geminiとv0による高速プロトタイピング
shinya337
0
250
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.6k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
290
Featured
See All Featured
It's Worth the Effort
3n
185
28k
For a Future-Friendly Web
brad_frost
179
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
KATA
mclloyd
30
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Automating Front-end Workflow
addyosmani
1370
200k
Producing Creativity
orderedlist
PRO
346
40k
Writing Fast Ruby
sferik
628
62k
What's in a price? How to price your products and services
michaelherold
246
12k
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Ͱॻ͔Ε͍ͯΔ
͓͠·͍