Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのconsole.log

Edward Fox
February 07, 2017

 はじめてのconsole.log

20170207
Meguro.es #8 発表資料

Edward Fox

February 07, 2017
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

  1. ͸͡Ίͯͷconsole.log
    EDWARD FOX
    @Meguro.es 2017/02/07

    View full-size slide

  2. Edward Fox
    - Developer @ Repro Inc.
    - RoR, JavaScript, AWS
    - Vue.js, HTTP/2, WebAssembly

    View full-size slide

  3. ಥવͰ͕͢Έͳ͞Μ

    View full-size slide

  4. console.logɺͯ͠·͔͢ʁ

    View full-size slide

  5. JSΛॻ͘ਓͰ
    console.logΛ࣮ߦͨ͜͠ͱ
    ͕ͳ͍ਓ͸͍ͳ͍Ͱ͢ΑͶ

    View full-size slide

  6. ࠓ೔࿩͢͜ͱ

    View full-size slide

  7. consoleΦϒδΣΫτͷ
    ศརؔ਺ʹ͍ͭͯ

    View full-size slide

  8. - console.tableͱ͔
    - console.profileͱ͔

    View full-size slide

  9. ৭ʑ͋ΔͷͰάά͍ͬͯͩ͘͞

    View full-size slide

  10. ϒϥ΢βͷΠϯεϖΫλʹ
    console.log(‘foo’)ͱೖྗͯ͠
    ͔Βɺfooͱग़ྗ͞ΕΔ·Ͱ

    View full-size slide

  11. ௐ΂Δํ๏

    View full-size slide

  12. 1.ϒϥ΢βͷιʔείʔυಡΉ
    2. ϒϥ΢βΛࣗલͰίϯύΠϧ
    ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏

    View full-size slide

  13. 1.ϒϥ΢βͷιʔείʔυಡΉ
    2. ϒϥ΢βΛࣗલͰίϯύΠϧ
    ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏

    View full-size slide

  14. ର৅͸WebKit
    ʢͷϛϥʔϦϙδτϦʣ
    https://github.com/WebKit/
    webkit

    View full-size slide

  15. C++ॳ৺ऀ͕งғؾͰಡΜ
    ͩͷͰɺؒҧ͍ͬͯͨΒڭ
    ͍͑ͯͩ͘͞
    && ͍ͩͿ୺ં͍ͬͯΔͷ
    Ͱɺͦͷล͸͝צหΛ

    View full-size slide

  16. ۦ͚଍Ͱ͍͖·͢

    View full-size slide

  17. Ͳ͔͜ΒಡΉ΂͖͔
    Θ͔Βͳ͍

    View full-size slide

  18. ೖྗΛड͚औΔʹ΋
    ΠϯεϖΫλͷUI͕ඞཁ

    View full-size slide

  19. WebInspectorUI

    View full-size slide

  20. jsͰॻ͔Ε͍ͯΔ͔Β
    ׂͱαΫαΫಡΊΔ

    View full-size slide

  21. ConsoleObserver͕
    ϢʔβʔͷೖྗΛ
    ؂ࢹ͍ͯ͠Δ

    View full-size slide

  22. ೖྗΛؔ஌͢Δͱ
    LogManagerʹॲཧΛҕৡ

    View full-size slide

  23. LogManager.messageWasAdded()

    View full-size slide

  24. ͜ͷmessageΛड͚औΔ
    ΠϯλʔϓϦλʔ͕͍Δ
    ͦͷ໊΋Interpreter

    View full-size slide

  25. Interpreter͔Βઌ͸
    C++Ͱॻ͔Εͨ
    ϒϥ΢βͷωΠςΟϒ࣮૷

    View full-size slide

  26. Interpreter͸
    UI͔ΒͷೖྗΛ
    callFrameͱͯ͠଴ͬͯΔ

    View full-size slide

  27. callFrame = InterpreterΛ
    ίʔϧͨ͠ɺJSͷίʔυ΍
    ͦͷ࣮ߦ؀ڥͳͲ

    View full-size slide

  28. InterpreterͰ͸ɺevalؔ਺͕
    callFrameΛड͚औͬͯධՁ
    JSValueܕͷ஋Λฦ͢

    View full-size slide

  29. ͜ͷͱ͖
    ࣮ߦ؀ڥͷείʔϓʹ΋ͱ͍ͮͨ
    LexicalGlobalObjectͳͲ΋ੜ੒
    strict modeͰͷ࣮ߦͱ͔΋
    ͜ͷ࣌఺Ͱ൑ผͯ͠ॲཧΛม͑Δ

    View full-size slide

  30. console.logͱ͍͏
    JSͷίʔυΛC++ͷؔ਺ʹ
    Ϛοϐϯάͯ͠
    ࣮ߦ͢Δඞཁ͕͋Δ

    View full-size slide

  31. େྔͷϚΫϩ

    View full-size slide

  32. putDirectNativeFunction-
    WithoutTransition()

    View full-size slide

  33. JSίʔυͷ࣮ߦঢ়ଶΛࣔ͢
    ExecStateΛ΋ͱʹ࣮ߦ

    View full-size slide

  34. JSC_HOST_CALLͱ͍͏
    ϚΫϩ͕͋Δ
    if CPU(X86) &&
    COMPILER(GCC_OR_CLANG)
    Έ͍ͨͳίʔυ΋͋ͬͯ
    ຯΘ͍ਂ͍

    View full-size slide

  35. ͔͜͜Βઌ͸
    ConsoleObjectΫϥε
    ͷίʔυΛ௥͍·͢

    View full-size slide

  36. ͞Βʹۦ͚଍Ͱ

    View full-size slide

  37. consoleProtoFuncLog()

    View full-size slide

  38. consoleLogWithLevel()

    View full-size slide

  39. logWithLevel()

    View full-size slide

  40. messageWithTypeAndLevel()

    View full-size slide

  41. WTFLogAlways()

    View full-size slide

  42. vprintf_stderr_with_trailing_
    newline()

    View full-size slide

  43. ʢϝιου໊ͷงғؾ͕
    มΘͬͨ…ʁʣ

    View full-size slide

  44. vprintf_stderr_common()

    View full-size slide

  45. logToStderr()

    View full-size slide

  46. ʹ͡Έग़Δ
    ௿ϨΠϠʔײ

    View full-size slide

  47. ͕͜͜࠷ਂ෦͔ʁ

    View full-size slide

  48. fputs()ͷ࣮૷͸
    WebKitʹͳ͍

    View full-size slide

  49. C++ʹ༻ҙ͞Ε͍ͯΔؔ਺

    View full-size slide

  50. > ϑΝΠϧϙΠϯλfpʹ
    จࣈྻstrΛग़ྗͯ͠
    ੒ޭ͢Ε͹ෛͰ͸ແ͍஋Λ
    ΤϥʔͰ͋Ε͹EOF(-1)Λฦ͢

    View full-size slide

  51. fputs()͢Δͱ
    ϑΝΠϧʢ͔Կ͔ʣ΁ͷ
    ग़ྗ͸৭Μͳͱ͜ΖΛ
    ܦ༝ͯ͠Χʔωϧͷ
    γεςϜίʔϧΛ࣮ߦ͢Δ

    View full-size slide

  52. ग़ྗ͞Εͨ಺༰͸
    ίʔϧ͞Εͨؔ਺Λ
    ͔͞ͷ΅ͬͯ஋Λฦ͢

    View full-size slide

  53. 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

    View full-size slide

  54. 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

    View full-size slide

  55. Θ͔ͬͨ͜ͱ

    View full-size slide

  56. ϒϥ΢β͸ڊେͳ
    ϥϯλΠϜ+ίϯύΠϥ

    View full-size slide

  57. [native code] ා͘ͳ͍

    View full-size slide

  58. ͓·͚
    ʢ࣌ؒ͋ͬͨΒʣ

    View full-size slide

  59. WebKitͷ
    δϫδϫ͘Δͱ͜Ζ

    View full-size slide

  60. 1. UIͷ෦෼͕es6Ͱ
    ॻ͔Ε͍ͯΔ

    View full-size slide

  61. = 1ͭͷϦϙδτϦʹ
    es6ࣗମͷ࣮૷ͱ
    es6ͷίʔυͱ
    es6ͷlintϑΝΠϧ͕͋Δ

    View full-size slide

  62. 2. UIͷ෦෼ͷjsίʔυ͕
    ͚ͬ͜͏console.assertΛ
    ࢖͍ͬͯΔ

    View full-size slide

  63. = ΫϥΠΞϯτͰى͖Δࣄ
    ͸৴༻Ͱ͖ͳ͍͠
    ҉໧తͳܕม׵΋ා͍͠
    = ͦ͏ͩconsoleʹ
    ศརͳؔ਺͋Δ͔Β
    ࢖ͬͪΌ͓͏ͥ

    View full-size slide

  64. 3. rubyͱ͔pythonͷ
    εΫϦϓτ͕ͨ·ʹ͍Δ

    View full-size slide

  65. = ։ൃऀ͕༻ҙͨ͠
    Ϗϧυ΍σόοά༻ͷ
    εΫϦϓτͳͲ
    = ͨͿΜ։ൃऀͷ޷ΈʹΑͬͯ
    rubyͱ͔pythonͰॻ͔Ε͍ͯΔ

    View full-size slide