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.3k
はじめての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
520
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
55
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
470
Repro basketball club
edwardkenfox
0
200
Introduction to UX Optimizer
edwardkenfox
0
76
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
240
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
100
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
310
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
980
Other Decks in Technology
See All in Technology
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.4k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Making Projects Easy
brettharned
111
5.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Designing for humans not robots
tammielis
247
25k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Faster Mobile Websites
deanohume
303
30k
Web Components: a chance to create the future
zenorocha
307
41k
Music & Morning Musume
bryan
43
5.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
A designer walks into a library…
pauljervisheath
201
24k
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Ͱॻ͔Ε͍ͯΔ
͓͠·͍