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
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
三視点LLMによる複数観点レビュー
mhlyc
0
230
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
TLSから見るSREの未来
atpons
2
310
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.1k
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.1k
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
ClaudeCodeにキレない技術
gtnao
1
860
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Code Review Best Practice
trishagee
69
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Thoughts on Productivity
jonyablonski
69
4.7k
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Ͱॻ͔Ε͍ͯΔ
͓͠·͍