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
590
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
69
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
510
Repro basketball club
edwardkenfox
0
210
Introduction to UX Optimizer
edwardkenfox
0
82
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
260
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
110
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
350
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1k
Other Decks in Technology
See All in Technology
Platform Engineering for Software Developers and Architects
syntasso
1
510
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
180
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
Lambdaと地方とコミュニティ
miu_crescent
2
370
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
190
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
KATA
mclloyd
29
14k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Ruby is Unlike a Banana
tanoku
97
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Language of Interfaces
destraynor
154
24k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Unsuck your backbone
ammeep
668
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing the Hi-DPI Web
ddemaree
280
34k
Building Applications with DynamoDB
mza
90
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
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Ͱॻ͔Ε͍ͯΔ
͓͠·͍