WebReplayから見るWeb開発の未来 #builderscon

C2dcf3e2f7861b2ec5d84045273ed5bd?s=47 kyo_ago
September 08, 2018

WebReplayから見るWeb開発の未来 #builderscon

宣伝
・macで「ポインタを自動的に規定のボタンの上に移動する(U)」やるやつ
https://github.com/kyo-ago/Automatically-Move-Mouse-Pointer-To-Default-Button-in-a-dialog-box-for-mac
・Chrome extension上でPuppeteerコードを実行するやつ
https://github.com/kyo-ago/puppeteer-chrome-extension-player

C2dcf3e2f7861b2ec5d84045273ed5bd?s=128

kyo_ago

September 08, 2018
Tweet

Transcript

  1. WebReplay͔ΒݟΔ Web։ൃͷະདྷ @kyo_ago

  2. એ఻

  3. kyo-ago/Automatically-Move- Mouse-Pointer-To-Default- Button-in-a-dialog-box-for-mac macͰʮϙΠϯ λΛࣗಈతʹن ఆͷϘλϯͷ্ ʹҠಈ͢Δ (U)ʯ΍Δ΍ͭ Λ࡞Γ·ͨ͠

  4. kyo-ago/puppeteer- chrome-extension-player Chrome extension্Ͱ Puppeteer ίʔυΛ࣮ߦ ͢Δ΍ͭΛ࡞ Γ·ͨ͠

  5. WebReplayͱ͸ Կ͔ʁ

  6. WebReplayͱ͸Կ͔ʁ • ͍ΘΏΔTimeTravelDebugging(TTD)
 WindowsͷωΠςΟϒΞϓϦ΍JVM؀ڥͰ࣮૷͋Γ • ίʔυͷ࣮ߦঢ়ଶΛཤྺͱͯ͠อ࣋͠ɺʮר͖໭͠ʯ͕Ͱ ͖Δ • ϒϥ΢βσόοΨʔͷػೳͰ͋ͬͯɺWebඪ४౳ͱ͸ແؔ ܎

  7. ͳͥWebReplayͷ ࿩Λ͢Δͷ͔ʁ

  8. ͳͥWebReplayͷ ࿩Λ͢Δͷ͔ʁ • ࠷ۙFirefox nightyʹϑϥά෇͖Ͱೖͬͨ
 ݱঢ়macOSͷΈର৅ • Web্ͷ৘ใ͸গͳ͍͕࣮ݱͰ͖ͨΒ௒ศརͬΆ͍ • ݸਓతʹͣͬͱʢ̍̌೥ҐʁʣࣅͨΑ͏ͳ΋ͷΛ࡞Ζ͏ͱ

    ͯͨ͠
  9. WebReplay͸ ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ

  10. WebReplay͸ ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ • FirefoxͰ͸࣮ݧత࣮͗ͯ͢༻͸ਏ͍
 ؆୯ͳίʔυ͸ಈ͕࣮͘؀ڥͰͷ࢖༻͸ɻɻɻ • WebKit(Safari)Ͱ͸2014೥͘Β͍ʹ࣮૷ཤྺ͋Δ
 ͕ɺ͓ͦΒ͘࡟আࡁΈ • Edge͸VisualStudioͱ૊Έ߹ΘͤΔͱಈ͘ʁ


    2015೥͘Β͍ʹղઆಈը͕͋Δ͕ৄࡉෆ໌
 ʢௐ͖ࠪ͠Εͳ͔ͬͨɻɻɻʣ
  11. ͔͜͜Β͸Firefox൛ WebReplayΛલఏʹ࿩͠·͢ ʢݕূ͕͠΍͔ͬͨ͢ͷͰʣ

  12. WebReplay͸ ͳΜͷͨΊʹ͋Δͷ͔ʁ

  13. ΫϥΠΞϯταΠυͷ όά࠶ݱͷͨΊ

  14. ΫϥΠΞϯταΠυͷ όά࠶ݱͷͨΊ • গͳ͘ͱ΋ݱঢ়͸جຊతʹʮه࿥ʯɺʮอଘʯɺʮస ૹʯɺʮ࠶ੜʯͷϢʔεέʔεΛ૝ఆͯ͠ΔͬΆ͍ • υΩϡϝϯτ্Ͱ΋ʮಈ࡞ʹӨڹ͢Δมߋ͸ߦ͑ͳ͍ʯ ͱ͍͏આ໌͋Γɻ • ࣮ࡍɺม਺ͷࢀর͸Ͱ͖ͯ΋ॻ͖׵͑͸Ͱ͖ͳ͔ͬͨɻ

  15. WebReplayͷ
 ࠓޙͷݟ௨͠͸ʁ

  16. WebReplayͷ
 ࠓޙͷݟ௨͠͸ʁ • ҆ఆԽ
 ݱঢ়΄ͬͱ͘ͱ݁ߏམͪΔ • ଟ؀ڥαϙʔτ
 macOSҎ֎Ͱ΋ಈ͘Α͏ʹ • อଘՄೳͳػೳͷ૿Ճ


    ·ͩະରԠͳૢ࡞͕͋ΔʢVideoܥͱ͔ɺWorkerͱ͔ʣ • อଘܗࣜͷվળ
 ݱঢ়࠷௿Ͱ΋27MBͷόΠφϦͳͷͰ΋͏ͪΐͬͱখ͘͞ͳΒͳ͍͔ ͳɻɻɻ
  17. ͭ·Γʁ

  18. ݱঢ়։ൃϑϩʔʹ Өڹ͢ΔػೳͰ͸ͳ͍

  19. ݱঢ়։ൃϑϩʔʹ Өڹ͢ΔػೳͰ͸ͳ͍ • ͦ΋ͦ΋NightlyͰabout:configΛมߋͯ͠༗ޮʹ͢Δػೳ • ҆ఆԽͱଟ؀ڥαϙʔτ͚ͩͰ΋਺೥͔͔ΔͷͰ͸

  20. ͜͜·Ͱ WebReplayͷ࿩

  21. ͔͜͜Β Web։ൃͷະདྷͷ࿩

  22. ࡢࠓͷDevTools͕ ௒ػೳ๛෋ͳ݅

  23. ࡢࠓͷDevTools͕ ௒ػೳ๛෋ͳ݅ • ಛʹ஫໨ͯ͠Δͷ͕ҎԼͷ̏ͭ • Live-edit • Local Overrides •

    SourceMap
  24. ΋͠WebReplayΛ ૊Έ߹ΘͤΕ͹ʁ

  25. ΋͠WebReplayΛ ૊Έ߹ΘͤΕ͹ʁ • DevTools্Ͱ೚ҙͷঢ়ଶͰετοϓ • ͔ͦ͜Βר͖໭͠ • ίʔυΛमਖ਼ͯ͠࠶ੜ͠௚͢

  26. ͭ·Γ

  27. ʮ͋ͷࠒʯʹ໭ΕΔʂ ʮ΋͏Ұ౓΍Γ௚͢ʯ ͜ͱ͕Ͱ͖Δʂ

  28. Web։ൃͷະདྷ

  29. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠