フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です
ノーコードでWebページをスクレイプできるChrome拡張「AnyPicker」
◆ AnyPicker https://anypicker.ryang-studio.com/ 紹介 「AnyPicker」は、ノーコードでWebページをスクレイプできるChrome拡張ツールです。 Chrome拡張機能をインストール後、スクレイプするWebサイトを開くとこのようなサイドバーが出現します。 STEPは全部で5つあり、その1つ目がこちら。今回は初めての登録なので「New recipe」を選択します。 続いてSTEP2、ここで実際にスクレイプするコンポーネントを登録していきます。 取得対象にカーソルを合わせてクリックすると フィールドとバリューが取得できます。 同じ要領で、ピックアップ全部のタイトルを選択しました。 なお、フィールド値は自由に設定可能。後にアウトプットデータのKey値になるので、取得しやすい英単語が好ましいでしょう。 続いてSTEP3は、リンク元を取得＆サジェス
ChromeブラウザだけでWebサイトのCSSを変更＆シェア可能な拡張機能「StyleURL」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのCSSを自分好みに変更してビフォー・アフターを簡単にシェアできるChrome拡張機能をご紹介します！ 開発者ツール上で普通にCSSを変更するだけで永続的に適用できるので、ブラウザさえあれば誰でも実行できるのが大きな特徴です。 なお、CSSの基本的な知識はpaizaラーニングの「HTML/CSS入門編」（一部無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 StyleURL 】 ■「StyleURL」の使い方 それでは、まず最初に「StyleURL」を使うための準備をしましょう！ サイトにアクセスして、画面中央にあるボタンをクリックします。 「Chromeウェブストア」が表示されるので、画面右上にある「Chromeに追加」ボタンをクリック！ すると、自動的にインストールされて準備が整います。 「St
エンジニアやデザイナーにおすすめのChrome拡張機能5選
GoogleのChromeストアでは、便利な機能を持つ拡張機能が数多く提供されています。 業務内容にあわせて自分に最適なツールをインストールすれば作業効率アップが期待できますが、拡張機能の数が多すぎてどれをインストールしたらよいのか迷ってしまうことはないでしょうか。 今回は、エンジニアやデザイナーをはじめとしたWeb開発業務の方におすすめのChrome拡張機能5選を紹介します。便利なものは取り入れて、作業を効率化して行きましょう。 エンジニアやデザイナーにおすすめなChrome拡張機能5選 1.DevTools Theme: Zero Dark Matrix Chromeウェブストア 「DevTools Theme: Zero Dark Matrix」は、Google Chromeデベロッパーツールの視認性を高めてくれる拡張機能です。 Google Chromeのデベロッパーツールは、デフ
PerfectPixel by WellDoneCode (pixel perfect)
この拡張機能は、ピクセル単位の精度でWebサイトを開発するのに役立ちます！
Console Importer - DevToolsで外部ライブラリをインポート
Google Chromeの開発者ツールを使っていて、外部のライブラリを使いたいと感じることは多々あります。そんな時にはJavaScriptのコードをすべて貼り付けたり、スタイルシートを動的に生成して読み込む手があります。しかし毎回やるのは面倒です。 そこで使ってみたいのがConsole Importerです。簡単に外部ライブラリを読み込めます。 Console Importerの使い方 $iというオブジェクトが追加されます。後はこれにJavaScriptやスタイルシートのURLを渡すだけです。 さらに jquery@2 といったような指定もできます。スタイルシートも特に変わらず使えます。 Console Importerをインストールしておけば、Webサイトの開発やデバッグ作業がとても楽になることでしょう。ライブラリを利用する際の手間が大幅に減るはずです。 Console Importe
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Our favorite Chrome extensions of 2023