宣伝 ・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
WebReplay͔ΒݟΔWeb։ൃͷະདྷ@kyo_ago
View Slide
એ
kyo-ago/Automatically-Move-Mouse-Pointer-To-Default-Button-in-a-dialog-box-for-macmacͰʮϙΠϯλΛࣗಈతʹنఆͷϘλϯͷ্ʹҠಈ͢Δ(U)ʯΔͭΛ࡞Γ·ͨ͠
kyo-ago/puppeteer-chrome-extension-playerChromeextension্ͰPuppeteerίʔυΛ࣮ߦ͢ΔͭΛ࡞Γ·ͨ͠
WebReplayͱԿ͔ʁ
WebReplayͱԿ͔ʁ• ͍ΘΏΔTimeTravelDebugging(TTD) WindowsͷωΠςΟϒΞϓϦJVMڥͰ࣮͋Γ• ίʔυͷ࣮ߦঢ়ଶΛཤྺͱͯ͠อ࣋͠ɺʮר͖͠ʯ͕Ͱ͖Δ• ϒϥβσόοΨʔͷػೳͰ͋ͬͯɺWebඪ४ͱແؔ
ͳͥWebReplayͷΛ͢Δͷ͔ʁ
ͳͥWebReplayͷΛ͢Δͷ͔ʁ• ࠷ۙFirefox nightyʹϑϥά͖Ͱೖͬͨ ݱঢ়macOSͷΈର• Web্ͷใগͳ͍͕࣮ݱͰ͖ͨΒศརͬΆ͍• ݸਓతʹͣͬͱʢ̍̌ҐʁʣࣅͨΑ͏ͳͷΛ࡞Ζ͏ͱͯͨ͠
WebReplayࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ
WebReplayࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ• FirefoxͰ࣮ݧత࣮͗ͯ͢༻ਏ͍ ؆୯ͳίʔυಈ͕࣮͘ڥͰͷ༻ɻɻɻ• WebKit(Safari)Ͱ2014͘Β͍ʹ࣮ཤྺ͋Δ ͕ɺ͓ͦΒ͘আࡁΈ• EdgeVisualStudioͱΈ߹ΘͤΔͱಈ͘ʁ 2015͘Β͍ʹղઆಈը͕͋Δ͕ৄࡉෆ໌ ʢௐ͖ࠪ͠Εͳ͔ͬͨɻɻɻʣ
͔͜͜ΒFirefox൛WebReplayΛલఏʹ͠·͢ʢݕূ͕͔ͬͨ͢͠ͷͰʣ
WebReplayͳΜͷͨΊʹ͋Δͷ͔ʁ
ΫϥΠΞϯταΠυͷόά࠶ݱͷͨΊ
ΫϥΠΞϯταΠυͷόά࠶ݱͷͨΊ• গͳ͘ͱݱঢ়جຊతʹʮهʯɺʮอଘʯɺʮసૹʯɺʮ࠶ੜʯͷϢʔεέʔεΛఆͯ͠ΔͬΆ͍• υΩϡϝϯτ্Ͱʮಈ࡞ʹӨڹ͢Δมߋߦ͑ͳ͍ʯͱ͍͏આ໌͋Γɻ• ࣮ࡍɺมͷࢀরͰ͖ͯॻ͖͑Ͱ͖ͳ͔ͬͨɻ
WebReplayͷ ࠓޙͷݟ௨͠ʁ
WebReplayͷ ࠓޙͷݟ௨͠ʁ• ҆ఆԽ ݱঢ়΄ͬͱ͘ͱ݁ߏམͪΔ• ଟڥαϙʔτ macOSҎ֎Ͱಈ͘Α͏ʹ• อଘՄೳͳػೳͷ૿Ճ ·ͩະରԠͳૢ࡞͕͋ΔʢVideoܥͱ͔ɺWorkerͱ͔ʣ• อଘܗࣜͷվળ ݱঢ়࠷Ͱ27MBͷόΠφϦͳͷͰ͏ͪΐͬͱখ͘͞ͳΒͳ͍͔ͳɻɻɻ
ͭ·Γʁ
ݱঢ়։ൃϑϩʔʹӨڹ͢ΔػೳͰͳ͍
ݱঢ়։ൃϑϩʔʹӨڹ͢ΔػೳͰͳ͍• ͦͦNightlyͰabout:configΛมߋͯ͠༗ޮʹ͢Δػೳ• ҆ఆԽͱଟڥαϙʔτ͚ͩͰ͔͔ΔͷͰ
͜͜·ͰWebReplayͷ
͔͜͜ΒWeb։ൃͷະདྷͷ
ࡢࠓͷDevTools͕ػೳ๛ͳ݅
ࡢࠓͷDevTools͕ػೳ๛ͳ݅• ಛʹͯ͠Δͷ͕ҎԼͷ̏ͭ• Live-edit• Local Overrides• SourceMap
͠WebReplayΛΈ߹ΘͤΕʁ
͠WebReplayΛΈ߹ΘͤΕʁ• DevTools্Ͱҙͷঢ়ଶͰετοϓ• ͔ͦ͜Βר͖͠• ίʔυΛमਖ਼ͯ͠࠶ੜ͢͠
ͭ·Γ
ʮ͋ͷࠒʯʹΕΔʂʮ͏ҰΓ͢ʯ͜ͱ͕Ͱ͖Δʂ
Web։ൃͷະདྷ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠