Enviar búsqueda
Cargar
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
•
1 recomendación
•
1,403 vistas
Yoshihisa Ozaki
Seguir
Microsoft が提供する Vorlon.js など、オープンな Web デバッグ環境をご紹介します。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 85
Descargar ahora
Descargar para leer sin conexión
Recomendados
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Yoshihisa Ozaki
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
Windows 10 の あたらしい Web ブラウザー について
Windows 10 の あたらしい Web ブラウザー について
Osamu Monoe
Microsoft edge deep dive
Microsoft edge deep dive
Osamu Monoe
Microsoft Edgeでサポートされる新しい API について
Microsoft Edgeでサポートされる新しい API について
Osamu Monoe
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Osamu Monoe
酒と泪と Edge と IE
酒と泪と Edge と IE
Osamu Monoe
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Osamu Monoe
Recomendados
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Yoshihisa Ozaki
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
Windows 10 の あたらしい Web ブラウザー について
Windows 10 の あたらしい Web ブラウザー について
Osamu Monoe
Microsoft edge deep dive
Microsoft edge deep dive
Osamu Monoe
Microsoft Edgeでサポートされる新しい API について
Microsoft Edgeでサポートされる新しい API について
Osamu Monoe
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Osamu Monoe
酒と泪と Edge と IE
酒と泪と Edge と IE
Osamu Monoe
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Osamu Monoe
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Osamu Monoe
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
Microsoft
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Microsoft
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
ここが変わったTizen sdk2.0alpha
ここが変わったTizen sdk2.0alpha
Hiroshi Sakate
Selenium2(web driver)
Selenium2(web driver)
Tetsuya Hasegawa
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
20060419
20060419
小野 修司
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
Takeshi Kondo
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
Internet Explorer サポート提供終了で変わること変わらないこと
Internet Explorer サポート提供終了で変わること変わらないこと
彰 村地
XPagesジャンプスタート
XPagesジャンプスタート
Mitsuru Katoh
View customize1.2.0の紹介
View customize1.2.0の紹介
onozaty
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Microsoft
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
TAKUYA OHTA
Introducing Windows Terminal
Introducing Windows Terminal
Kazuki Takai
めとべや東京10 Universal Windows Platform appの新しいバインディング
めとべや東京10 Universal Windows Platform appの新しいバインディング
一希 大田
WindowsにおけるUIスレッドの基礎
WindowsにおけるUIスレッドの基礎
ssuser349357
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
Hiroaki Oikawa
Más contenido relacionado
La actualidad más candente
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Osamu Monoe
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
Microsoft
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Microsoft
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
ここが変わったTizen sdk2.0alpha
ここが変わったTizen sdk2.0alpha
Hiroshi Sakate
Selenium2(web driver)
Selenium2(web driver)
Tetsuya Hasegawa
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
20060419
20060419
小野 修司
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
Takeshi Kondo
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
Internet Explorer サポート提供終了で変わること変わらないこと
Internet Explorer サポート提供終了で変わること変わらないこと
彰 村地
XPagesジャンプスタート
XPagesジャンプスタート
Mitsuru Katoh
View customize1.2.0の紹介
View customize1.2.0の紹介
onozaty
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Microsoft
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
TAKUYA OHTA
Introducing Windows Terminal
Introducing Windows Terminal
Kazuki Takai
めとべや東京10 Universal Windows Platform appの新しいバインディング
めとべや東京10 Universal Windows Platform appの新しいバインディング
一希 大田
WindowsにおけるUIスレッドの基礎
WindowsにおけるUIスレッドの基礎
ssuser349357
La actualidad más candente
(20)
Microsoft Edge 最新アップデートとこれから
Microsoft Edge 最新アップデートとこれから
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Selenium2(web driver) ide編
Selenium2(web driver) ide編
ここが変わったTizen sdk2.0alpha
ここが変わったTizen sdk2.0alpha
Selenium2(web driver)
Selenium2(web driver)
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
20060419
20060419
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
View customize pluginを使いこなす
View customize pluginを使いこなす
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Internet Explorer サポート提供終了で変わること変わらないこと
Internet Explorer サポート提供終了で変わること変わらないこと
XPagesジャンプスタート
XPagesジャンプスタート
View customize1.2.0の紹介
View customize1.2.0の紹介
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
Introducing Windows Terminal
Introducing Windows Terminal
めとべや東京10 Universal Windows Platform appの新しいバインディング
めとべや東京10 Universal Windows Platform appの新しいバインディング
WindowsにおけるUIスレッドの基礎
WindowsにおけるUIスレッドの基礎
Similar a Microsoft によるオープンなweb デバッグ環境 comm tech festival-
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
Hiroaki Oikawa
サイドプロジェクトで使う Azure DevOps
サイドプロジェクトで使う Azure DevOps
Shuhei Eda
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
寛 吉田
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
Manabu Shimobe
アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門
Hori Tasuku
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Yoshitaka Seo
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Fujio Kojima
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Kazuhiro Hara
Redmine Applied for Large Scale
Redmine Applied for Large Scale
Rakuten Group, Inc.
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
バージョン管理の断捨離
バージョン管理の断捨離
Kazushi Kamegawa
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
JavaScript And Keywords
JavaScript And Keywords
uupaa
その Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しよう
Osamu Monoe
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Osamu Monoe
Similar a Microsoft によるオープンなweb デバッグ環境 comm tech festival-
(20)
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
サイドプロジェクトで使う Azure DevOps
サイドプロジェクトで使う Azure DevOps
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Redmine Applied for Large Scale
Redmine Applied for Large Scale
Chrome DevTools.next
Chrome DevTools.next
バージョン管理の断捨離
バージョン管理の断捨離
Play jjug2012spring
Play jjug2012spring
JavaScript And Keywords
JavaScript And Keywords
その Web サイト、その Web アプリを最新の IE11 に対応しよう
その Web サイト、その Web アプリを最新の IE11 に対応しよう
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Más de Yoshihisa Ozaki
Microsoft edge insider channelsがリリースされました
Microsoft edge insider channelsがリリースされました
Yoshihisa Ozaki
Microsoft新しいブラウザーのウワサ
Microsoft新しいブラウザーのウワサ
Yoshihisa Ozaki
Internet Explorer 11 August UpdateのF12 開発者ツール
Internet Explorer 11 August UpdateのF12 開発者ツール
Yoshihisa Ozaki
Visual studio 14 CTP2 概要
Visual studio 14 CTP2 概要
Yoshihisa Ozaki
Windows 8.1 Update 1で更新されたInternet Explorer 11のF12開発者ツールアップデート
Windows 8.1 Update 1で更新されたInternet Explorer 11のF12開発者ツールアップデート
Yoshihisa Ozaki
Internet Explorer 11 概要
Internet Explorer 11 概要
Yoshihisa Ozaki
C#coding guideline その2_20130325
C#coding guideline その2_20130325
Yoshihisa Ozaki
CLRの基礎 - プログラミング .NET Framework 第3版 読書会
CLRの基礎 - プログラミング .NET Framework 第3版 読書会
Yoshihisa Ozaki
C# コーディングガイドライン 2013/02/26
C# コーディングガイドライン 2013/02/26
Yoshihisa Ozaki
Ie10正式リリース版のhtml5 css3
Ie10正式リリース版のhtml5 css3
Yoshihisa Ozaki
Code Pack の話
Code Pack の話
Yoshihisa Ozaki
Más de Yoshihisa Ozaki
(11)
Microsoft edge insider channelsがリリースされました
Microsoft edge insider channelsがリリースされました
Microsoft新しいブラウザーのウワサ
Microsoft新しいブラウザーのウワサ
Internet Explorer 11 August UpdateのF12 開発者ツール
Internet Explorer 11 August UpdateのF12 開発者ツール
Visual studio 14 CTP2 概要
Visual studio 14 CTP2 概要
Windows 8.1 Update 1で更新されたInternet Explorer 11のF12開発者ツールアップデート
Windows 8.1 Update 1で更新されたInternet Explorer 11のF12開発者ツールアップデート
Internet Explorer 11 概要
Internet Explorer 11 概要
C#coding guideline その2_20130325
C#coding guideline その2_20130325
CLRの基礎 - プログラミング .NET Framework 第3版 読書会
CLRの基礎 - プログラミング .NET Framework 第3版 読書会
C# コーディングガイドライン 2013/02/26
C# コーディングガイドライン 2013/02/26
Ie10正式リリース版のhtml5 css3
Ie10正式リリース版のhtml5 css3
Code Pack の話
Code Pack の話
Último
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(10)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
1.
Microsoft によるオープンな Web デバッグ環境 尾崎
義尚 2015/9/26
2.
尾崎 義尚 Ozaki
Yoshihisa • Microsoft MVP for Internet Explorer • @yoshioms • Web開発でよく使う、特に使えるChromeデベロッパー・ツー ルの機能 • http://www.buildinsider.net/web/chromedevtools/01 • Web制作で使いこなしたいIE開発者ツールの最新機能 • http://www.buildinsider.net/web/ief12devtools/01
3.
オープンソースじゃないけど オープンな Edge
4.
どんな感じでオープンか デバッグ環境がオープン 開発の進捗がオープン F12 開発者ツール
5.
どんな感じでオープンか デバッグ環境がオープン 開発の進捗がオープン F12 開発者ツール
6.
VORLON.JS
7.
Vorlon.js • http://vorlonjs.com/ • オープンソース •
拡張可能プラグイン アーキテクチャ • Node.js と Socket.io を利用 • リモート デバッグ可能なマルチ プラットフォーム開発者ツー ル
8.
Vorlon.js • Vorlon.js サーバーのセットアップ、実行 $
npm i –g vorlon $ vorlon <script src=“http://localhost:1337/vorlon.js”></script> • アプリで Vorlon.js を有効に
9.
Vorlon.js
10.
Vorlon.js 接続元クライアント一覧
11.
Vorlon.js ダッシュボード サイドは、送られてき た情報でコマンド パネルを生成する クライアント
サイドは、デバイスの 情報を送信する
12.
Vorlon.js • デフォルト プラグイン •
Console • Modernizr • DOM Explorer • Object Explorer • サンプル プラグイン • https://github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorl on/plugins/sample • Console • Modernizr • DOM Explorer • Object Explorer • XHR Panel • ngInspector (Angular.js) • Network monitor • Resource Explorer
13.
Vorlon.js 息を吹き返した?
14.
WebDriver
15.
WebDriver • ブラウザ テストの自動化 •
W3C WebDriver 標準 • https://w3c.github.io/webdriver/webdriver-spec.html • Microsoft WebDriver • http://www.microsoft.com/en-us/download/details.aspx?id=48212 • Borland Silk • http://online.borland.com/windows10
16.
WebDriver Microsoft WebDriver のインストール http://www.microsoft.com/en-us/download/details.aspx?id=48212 1 Selenium
のダウンロード http://docs.seleniumhq.org/download/ 2 Visual Studio コンソール アプリで、② を参照 3
17.
WebDriver Status Status Count Complete
51 Partial 4 Not Yet 34 WebDriver Status https://dev.modern.ie/platform/status/webdriver/details/ Build 10532 時点 Build/Priority Count 10240 36 10532 18 Priority 1 8 Priority 2 9 Priority 3 15 Priority 4 2
18.
WebDriver ドキュメント • Microsoft
Edge 用 WebDriver • https://msdn.microsoft.com/ja-jp/library/mt188085(v=vs.85).aspx
19.
dev.modern.ie
20.
21.
22.
23.
24.
RemoteApp - HTML5TEST 環境
スコア IE11 (Windows 10) 348 IE11 with EdgeHTML(RemoteApp) 402 Edge (Windows 10 10547) 458 Chrome 45 526
25.
仮想マシン https://dev.modern.ie/tools/vms/windows/ XP_IE6 Vista_IE7 XP_IE8 Win7_IE8 Win7_IE9 Win7_IE10 Win8_IE10 Win8.1_IE11 Win7_IE11 Win10_Microsoft Edge それぞれサポートされている仮想 化環境が異なる VMWare Hyper-V 2008R2 Hyper-V
2012 VirtualBox VPC
26.
ブラウザのスクリーンショット https://dev.modern.ie/tools/screenshots/
27.
どんな感じでオープンか デバッグ環境がオープン 開発の進捗がオープン F12 開発者ツール
28.
UserVoice • https://wpdev.uservoice.com/forums/257854-internet- explorer-platform/category/84475-f12-developer-tools
29.
デスクトップ IE 開発者ツールを使って Windows
Phone の IE mobileをデバッグ • 412 votes • MacOS / iOS の Safari みたいに Windows Phone の IE mobile のデバッグができるようにして欲しい。 >>> VS できるよ。 • http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/ 04/diagnosing-mobile-website-issues-on-windows-phone-8- 1-with-visual-studio.aspx 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6510481-debug-for-ie-mobile-on-windows- phone-using-desktop
30.
デバッガーでシンタックス エラーを表示 • 145
votes • JavaScript ファイルにシンタックス エラーがあったとき、赤の 波線でエラーを表示して欲しい。 >>> Backlog に登録しました。 • そのうち実装します。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225699-show-syntax-errors-in-debugger
31.
Edit and Continue •
122 votes • デバッガーで JavaScript をデバッグ中にコードを変更したら、 その場で反映して、実行を継続して欲しい。 >>> 実装中 • 複雑な機能なので、ちょっと時間がかかります。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225599-edit-and-continue
32.
開発者ツールをドックできるように • 64 votes •
現在のウィンドウに開発者ツールをドックする機能が欲しい >>> 実装中 • Edge のアップデートに追加できるように作業中です。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9160582-dock-tools
33.
[ESC] キーでコンソールを表示 • 26
votes • Ctrl + ` でコンソール表示ってわかりにくい。Chrome とか Firefox みたいに Esc キーで表示してよ。 >>> 作業中 • ガッテン 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6709603-make-the-escape-key-open-the-console- when-using-th
34.
デバッグの中止 • 15 votes •
[デバッグの中止] できる機能が欲しい。デバッグを中止すると、 後続のブレークポイントで停止しないようにして欲しい。 >>> 作業中 • デバッガーを切断 (Disconnected) できる機能を実装中です。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6225650-stop- debugging
35.
Web View で
F12 のサポート • 12 votes • Web View (ストア アプリ) や Web Browser (.NET) アプリケー ションをデバッグできるツールがない。JavaScript のメモリ リークや Hang、Crash のデバッグが可能になる機能が欲しい。 >>> 作業中 • Windows 10 の 1月プレビューで、組み込み Web コントロール にアタッチできる F12Chooser.exe の早期リリースが含まれて います。 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6823388-f12-support-for-web-browser-and- web-view-controls
36.
F12Chooser.exe 要望
37.
F12Chooser.exe 要望
38.
リモートデバッグ プロトコルを使ったデバッ グ機能 • 38
votes • Chrome で実装されているデバッグ プロトコル (https://developer.chrome.com/devtools/docs/debugger- protocol) を使えるようにして欲しい。 >>> 作業中 • 早期プロトを公開中 要望 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6511301-debugging-capabilities-using-the-remote- debugging
39.
IE Diagnostics Adapter •
https://github.com/Microsoft/IEDiagnosticsAdapter • MITライセンス • Chrome remote debugging protocol (https://developer.chrome.com/devtools/docs/debugger- protocol) を使ったデバッグ • Pre Alpha • DOM と基本的なスクリプト デバッグのみ • Microsoft Edge はまだ
40.
IE Diagnostics Adapter
41.
IE Diagnostics Adapter
42.
IE Diagnostics Adapter オワコン?
43.
Boom! It’s done(実装済み) 採用されたアイディア ネットワークの記録を自動的に開始してほしい Ctrl
+ R でリフレッシュ Chrome みたいにソースタブに CSS を Cookie の検証と編集を可能に Dart VM をサポートしないでほしい Boom! It’s done
44.
Chrome みたいにソースタブに CSS
を • JavaScript • CSS • ローカル ストレージ • セッション ストレージ • クッキー Boom! It’s done
45.
Cookie の検証と編集を可能に Boom! It’s
done Cookie、セッション ストレージ、ローカル ストレージ の値を参照、編集が可能に
46.
どんな感じでオープンか デバッグ環境がオープン フィードバックと進捗がオープン F12 開発者ツール
47.
F12 開発者ツール ドキュメントがオープンソースに (ただし英語だけ) https://github.com/MicrosoftEdge/MicrosoftEdge-Documentation
48.
DOM Explorer
49.
DOM Explorer 変更箇所 ノードにバインドさ れたイベント Margin、Paddingなど 最終的に適用された スタイル ノードに適用されて いるスタイル 疑似状態
50.
DOM Explorer • LESS、SASS
をサポート ソース切り替え
51.
Web Essentials F12 開発者ツールで変更した内容を
Visual Studio に反映
52.
コンソール
53.
コンソール フィルター
54.
デバッガー
55.
デバッガー • JavaScript • CSS •
ローカル ストレージ • セッション ストレージ • クッキー
56.
デバッガー • Cookie • ローカル
ストレージ • セッション ストレージ の内容確認・編集が可能
57.
デバッガー • マイコードのみをデバッグ (Just
My Code) • デバッグ済みのライブラリー コードにス テップインしない • jQuery, Bootstrap, 社内共通ライブラリーなど
58.
デバッガー • 後続のブレークポイントで止まらないようにする デバッガーのデタッチ
59.
デバッガー • 比較 • 保存 •
整形出力 (Prettify) • 右端で折り返す • ライブラリー コードとしてマークする • ソースの切り替え
60.
デバッガー • TypeScript, CoffeeScript
のデバッグが可能 マップファイルを使って 元のファイルを読み込み
61.
デバッガー 関数、オブジェクトを 参照しているソースを表示 関数、オブジェクトの 定義に移動
62.
デバッガー 処理を止めることなく、コンソールに 状態を出力
63.
デバッガー (そのうち) • Time
Travel Debugging • Visual Studio にある Intellitrace みたいなもの • 実行状態を記録 • たとえば、例外が発生したときに発生前の状態まで戻る • MSR の研究結果 ステップバック http://channel9.msdn.com/Events/WebPlatformSummit/2015/Whats-new-in-the-F12-Developer-Tools http://channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML
64.
ネットワーク タブの切り替えが不要に
65.
ネットワーク
66.
ネットワーク • デフォルト オン
67.
ネットワーク
68.
ネットワーク レスポンス ボディー 整形も可能 HTTP ヘッダー
69.
ネットワーク Cookie リクエストからレスポン スまでの時間 遅い場合はチューニング を検討する • サーバーサイド処理 • CDN
を検討リクエスト パラメータ
70.
パフォーマンス 「UI の応答」と「プロファイラー」が統合
71.
パフォーマンス イベント CPU 使用率 FPS タイムライン タイムライン詳細
72.
パフォーマンス 空白の時間がある 処理がブロックされている ように見える
73.
パフォーマンス イベントの詳細を見ると、Facebook プラグインのダウンロードから、 読み込みまでの時間が空いていることがわかる
74.
パフォーマンス 読み込みに時間がかかって、 後続の処理まで待っていた
75.
処理時間の配分 詳細まで切り分け可能
76.
パフォーマンス 描画に時間がかかっているエレメントを 選択して、ハイライト 右クリックで DOM Explorer
に切り替え
77.
パフォーマンス 範囲内で実行された JavaScript コードを表示
78.
メモリ
79.
メモリ スナップショット作成時のメモリ状態を取得 • 使用量 • オブジェクト数 •
差分
80.
メモリ
81.
2 点間の比較 オブジェクトを参照しているオブジェクト →参照されているということは、GC で回収されない オブジェクト名をクリックすると 「デバッガー」のソースに切り替わる
82.
エミュレーション ドキュメント モードの切り替えが消滅
83.
エミュレーション 緯度・経度、GPS なしをシミュレート
84.
試験的機能
85.
試験的な JavaScript 機能を有効にする ES2015
Destructuring ES2016 Async Functions ES2016 Exponentiation operator
Descargar ahora