フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です
どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。 ページの基本情報。 指定した要素のプロパティを表示するインスペクタ。 インスペクタでスタイルを変更すると、すぐにページに反映されます。 メ
LIGブログの安全な開発のために 〜WebdriverIOでスクリーンショットを撮る編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 8月より自社開発チームに異動となり、最近はLIGブログの改善に勤しんでいます。 Webサイトも長く運用されるとどうしてもCSSが負債になってしまいがちですね。 負債返却のために安心してコードを綺麗にしていきたいのですが、修正が思わぬ場所で影響を起こしてしまってCSSが壊れていてもなかなか気づきづらいものです。 今回は、目視での確認漏れを少し楽にするべく、WebdriverIOを使ってスクリーンショットを撮るサンプルを作ってみました。(検証してないのでWindowsをお使いの方は動かなかったらごめんなさい。) WebdriverIOの導入 事前にNode.jsのインストールとJava7（jdk7）以上がインストール（確認方法はこちら）されている必要があります。 リポジトリのクローン後、npmの依存モジュールのインストールが済めば、Webdr
phantomscanner - ポートチェックとスクリーンショット
社内でPC管理を行う際に大事な要素が余計なポートが開いていないかどうかのチェックです。特に80番ポートが開いていると悪意のあるウェブサイトを閲覧した際に攻撃される可能性があります。 空いているポートをチェックするソフトウェアも多数ありますが、今回はphantomscannerを紹介します。ポートのチェックと一緒にスクリーンショットを撮ってくれます。 phantomscannerの使い方 phantomscannerはIPアドレスの範囲を渡して実行します。 $ python scanner.py 192.168.0.0/24 scanning 192.168.0.85... scanning 192.168.0.174... scanning 192.168.0.230... scanning 192.168.0.216... scanning 192.168.0.166... scanni
Android端末のスクリーンショットを撮る方法（Windows）
すでに色々なところで紹介されてますが、WindowsでAndroid端末のスクリーンショットを撮る方法です。こんな感じでキャプチャできます。 ここで使っているAndroid端末は、docomo Xperia acro（SO-02C）、WindowsはVistaです。 １．JAVA SDKのダウンロードとインストール Android SDKの動作にはJAVA SDKが必要なので、インストールします（詳細は割愛します）。 Java SE Downloads ２．Android SDKのダウンロードとインストール Android Developers「Android SDK」よりAndroid SDKをダウンロードし、インストールします（詳細は割愛します）。2011年8月現在であればインストーラつきの「installer_r12-windows.exe」を利用するのがよいでしょう。 Androi
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev
1クリックで簡単！さまざまなデバイスのサイズで表示したスクリーンショットを撮影する無料オンラインサービス
Device art generator | Google Play | Android Developers