フロントエンドにおける「表示系バグのデバッグ効率化」を考えるのに役立つツールやTipsまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 画面の表示系のデバッグって、面倒で大変ですよね。 今回は、フロントエンドの開発での、表示系のデバッグを効率化するために普段使っているツールや手法をご紹介したいと思います。 便利な検証環境/ツールを用意する Macで開発している場合、IEでの表示確認を都度実機で確認するのはとても面倒です。また、都度FTPアップしないと修正の確認ができないのも、とても不便です。 まずはそれらを解決するツールを2つご紹介します ModernIE（with VirtualBox） https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads ModernIEは、Microsoftが公式に提供しているIEテスト用の仮想マシンです。 MacでもIEブラウザを動かして検証することがで
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
Macユーザー必見！手軽にスマホを動作確認できるiOSシミュレーターをご紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 スマートフォンサイトの制作で面倒なのは、実は、実機での動作確認だと思います。 PCからスマートフォン表示を確認する方法はいくつかありますが、今回はMacユーザーにぜひ使って欲しい便利なツールをご紹介いたします！ iOSシミュレータとは？ Appleの開発者向けツールXcodeに含まれるiOSのシミュレータソフトです。Mac上で、iPhoneやiPadの環境をシミュレートすることができます。他のシミュレータソフトと比べて次のような特徴があります。 Appleが正式に配布しているMac標準アプリケーションなので、動作が軽い iOSの再現がかなり本物に近く、実機との差が少ない ※ゼロではありません！ 最終確認は必ず実機で行いましょう。 シミュレーターを起動するまでの手順 まずは、起動するまでの手順をみていきましょう。 1. Xcodeのダウンロード、インス
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
