バグはここに潜んでいる！ 効率よくテストを行うためには？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ Webディレクターのなべちゃんです。 Webサイト制作はヒアリングから始まり、見積もり・提案、デザイン、コーディングなどの工程があるのですが、その中で今回は「テスト」について紹介します。 ディレクターが行うテストについて ここで紹介するテストは、エンジニアリングなテストではなく、ディレクターが行っているテストです。実装担当者が一通りコーディングを終えテストをしたあとで、ディレクターが最終チェックをしていきます。 ディレクターが行っているテスト デザイン再現性テスト(デザイン通りにコーディングがされているか)はデザイナーが、その他単体テスト、結合テストなどはエンジニアが行っていて、十分なテストを行い、ついにリリースを迎えます！ テストに対する心構え 先ほど「十分なテスト」という表現をしましたが、「完璧なテスト、完璧なサイト」をつくるのは、実は不可能とされています。 「バグを全部
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
ブラウザからPOSTメソッドを送信できるChrome拡張「Advanced REST client」
ブラウザからPOSTメソッドなどのHTTPリクエストを簡単に送信できるChrome拡張「Advanced REST client」を紹介します。 １．はじめに ブラウザからPOSTメソッドのHTTPリクエストを送信するには、PHPやJavaScript、Perlなどでスクリプトを組み、それを起動する必要がありますが、結構面倒です。 もっと簡単にPOSTメソッドを送信する方法がないのか調べていたところ、Chrome拡張機能をみつけました。 ということで、Chrome拡張「Advanced REST client」を紹介します。 ２．Advanced REST clientのインストール Advanced REST clientのページにアクセスして「CHROMEに追加」をクリック。 「アプリを追加」をクリック。 これでアプリの一覧に「Advanced REST client」が追加されます。
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
文字の上にカーソルを置くだけでフォント名やサイズを特定、試し打ち＆ダウンロードも可能な「Fontface Ninja」
ウェブサイト上で「このフォントいいなあ」と思った時にカーソルをかざすだけでフォントの種類やサイズを知ることができ、さらにその場でフォントの文字を試し打ち＆サイズの変更などが可能で、わざわざフォントのダウンロードページを開かなくても閲覧していたウェブサイト上からフォントのファイルをダウンロードまでできてしまうというGoogle Chrome拡張機能＆Safariプラグインが「Fontface Ninja」です。 Fontface Ninja http://fontface.ninja/ Fontface NinjaはGoogle Chrome拡張機能とSafariプラグインがあり、ブックマークレットは現在開発中のようです。今回はGoogle Chrome拡張機能を使用してみます。 Google ChromeでChrome ウェブストアのFontface Ninjaのページを開きます。 右上に
Emmet Re:view
A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices. Breakpoints View Displays resizeable view for each CSS media query breakpoint of your page. Contents of large viewports are dowscaled to fit your screen size. All views are fully synchronized: scrolls, form field fills and clicks, even mouse interaction
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
Google Chrome で超手軽にスマホ向けデザインを確認する方法
最近、Google Chrome のデベロッパー ツールにスマートフォンでの表示を確認する機能があることを知りました。 いままでは、レスポンシブデザイン Web デザインをするときに、ちまちまとブラウザーのサイズを変えたり、Web サービス (Responsive Design Testing とか Responsive Web Design Test Tool とか) を使っていたのですが、こちらの手順のほうがお手軽なので紹介します。 設定は超簡単！！ Google Chrome のデベロッパー ツールを開いて、右下の歯車のアイコンをクリックします。 左側から [Overrides] を選んで、[User Agent] と [Device metrics] にチェックを入れます。 これだけです！ Google Chrome 32 からは設定方法が変わっています。ちょっとややこしい。 右上
DevTools Tips and Tricks
A whirlwind tour of DevTools tips and tricks Part I: DevTools tips, tricks and awesome features (video) Part II: Extending DevTools, Debug Protocol, Extensions, ... (video) Follow along @ bit.ly/devtools-tips Elements & Console Drag & Drop to reorder elements $0 to inspect selected element in console Break on node removal - delete me cmd-? to become a keyboard ninja Customize your settings! Disab
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」を紹介します。 先日、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を投稿したところ、Chromeでも同じような機能がほしい！みたいな書き込みがあったので、探してみたら似たような拡張機能がありました。 それがこの「Resizer」です。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」については、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を参照ください。 ２．インストール 「Resizer」のページ右上にある「CHROMEに追加」をクリック。 表示されたダイアログの「追加」をクリック。 これでインストールされました。 ３．「Resizer」の使い方 レスポンシブWebデザインのサンプルサイトとして
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」:phpspot開発日誌
php-console - Google Chrome extension for displaying PHP errors/exceptions/debug messages in browser console or notification popups - Google Project Hosting PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」。 Chromeの拡張とPHPのソースコードで動かすもので、PHPのエラーを、Chromeのコンソールウィンドウや、画面内にポップアップでポコポコ出せたりします。 要はChrome用のFirePHPみたいなものです。 以下のようにエラーレベルとエラーメッセージが表示されます。 コンソールの例 ポップアップの例 この機能が使えるかどうか？はアドレスバーで確認できます。使える場合はアイコンが次のように表
Chrome Logger - Server side application debugging
About Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console. Most languages include their own logging capabilities, but sometimes it is easier to see your logs right in the browser. Chrome Logger used to be known as ChromePHP. If you are feeling generous, you can donate to help support development. Usage Using Chrome Logger is simple: Install the C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Postman | API Development Environment