フロントエンド技術を学ぼう 3-7.ブラウザツール

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第59回は Part III: Front-End Dev Toolsから、7項のBrowser Toolsを紹介します。

ブラウザツールの説明です。

ブラウザツール

JSブラウザコーディングユーティリティ

• History.js
• html2canvas
• Platform.js
• URI.js

どのブラウザが何をサポートしているか判断してくれるリファレンスツール

• Browser support for broken/missing images
• Browserscope
• caniuse.com
• Firefox Platform Status - Implementation & standardization roadmap for web platform features
• HTML5 Please
• HTML5 Test
• iwanttouse.com
• jscc.info
• Platform Status
• whatwebcando.today

ブラウザ開発/デバッグツール

• Chrome Developer Tools (開発ツール) [日本語]
  
  • Per-Panel Documentation [日本語]
  • コマンドライン API リファレンス [日本語]
  • キーボード ショートカットのリファレンス [日本語]
  • DevTools の設定とカスタマイズ [日本語]
• Firefox 開発ツール [日本語]
• IE Developer tools (F12ツール)
• Safari Web Inspector
• Vorlon.js

どのブラウザが何をサポートしているか判断してくれるブラウザコーディングツール

• Feature.js
• Modernizr

ブラウザのPolyfills/Shims

• console-polyfill
• HTML5 Cross Browser Polyfills
• fetch
• socket.io
• SockJS
• webcomponents.js
• webshim

ブラウザテスト/自動化

• Browserling [無料〜有料]
• BrowserStack [$]
• CrossBrowserTesting.com [$]
• Nightcloud.io
• Sauce Labs [$]

ヘッドレスブラウザ

• PhantomJS
  
  • PhantomCSS
• slimerjs
• TrifleJS
• Zombie.js

ブラウザの自動化

機能テストとモンキーテストに使用されます。

• CasperJS
• Nightmare
• TestCafe

ブラウザハッキング

• browserhacks.com