フォームの入力内容を保存するChrome拡張機能【Autofill】
Chrome拡張機能『Autofill』の導入方法 今回紹介する『Autofill』は、Chromeの拡張機能として利用する事ができる、プラグイン的な位置づけの作業系ツールです。 『Autofill』をChromeに追加する方法 Chrome拡張機能の追加方法は簡単で、以下のリンクから『Autofill』のページへ移動し、『Chromeに追加』ボタンを押せば完了します。（※逆に削除をしたい場合は、追加後に表示される『Chromeから削除します』ボタンを押せばOKです） ▼公式サイト Chromeウェブストア - Autofill Chrome拡張機能『Autofill』の使い方 基本的にはWEBフォームの内容を『保存する』事と『読み込む』事がこのツールの主な使用方法になります。それぞれ順番に解説してゆきますね。 1.フォームの内容を保存する Autofillを使ってフォームの内容を保存する
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
Redux Devtools Extensionを使った時のこの感動を伝えたい - Qiita
Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。 Reduxについて 色々解説してくれてますので、それを参考にしてください。 https://qiita.com/kiita312/items/49a1f03445b19cf407b7 ようはUIの状態を管理するフレームワークだそうです。 Redux Devtools Extensionについて Reduxアプリの開発ツールの一つで、 ブラウザの拡張機能からReduxの状態管理を可視化してくれます。 chromeやfirefoxで使えるようです。 デモ 何がいいのか？ 1. デバッグが便利 どのアクションでどの状態になり、どんな値を持つのか一発でわかります。 状態遷移後の値の差分もみれたりします。 2. テストでも活躍するかも テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があ
React Developer ToolsでReactで作ったページをデバッグする - Qiita
React Developer Toolsとは Facebookから公式で提供されているデバッグ用ツールです。 React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。 Reactで作ったページの状態をすぐ把握できるため、デバッグが捗ります。 React Developer Toolsは現在、３種類が提供されています。 Google Chrome拡張機能版 Firefox拡張機能版 Standalone版 Safariでデバッグしたい場合やReact Navtieをデバッグしたい場合はこちらを使用 この記事ではGoogle Chrome拡張機能版を元に解説していきます。 インストール方法 こちらからインストールをします。 追加するとアドレスバーの横にRe
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
Webデザイナー必見！Webデザインに便利なGoogle Chromeの拡張機能4選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
それぞれのボタンをクリックすると別タブが開き、編集画面になります。 フロッピーディスクのアイコンをクリックすると、PNGまたはJPGで画像が保存されます。ちなみにフロッピーディスクって現在使われているんでしょうか^^;。 （画像の保存形式は「ツールバーのアイコンを右クリック→オプション」から変更できます） その右のボタンではそれぞれ、「PDFで保存」「クリップボードにコピー」「サムネイル画像として保存」「印刷」が可能です。 「PDFで保存」「クリップボードにコピー」は地味に使えるので便利ですね。 下のボタンからは、Gmail・Dropbox・Evernoteなどに共有ができます。 また、キャプチャして保存する前に、左上のツールで直接画像を編集することができます。 気になったサイトを画像保存してアーカイブとして残しておきたいという時に重宝しますね。 DLリンク：Openscreenshot
Google Chrome拡張機能のアクセシビリティチェックツール"Alix"が便利すぎた - Qiita
Google Chrome拡張機能のアクセシビリティチェックツールAlixが簡単便利でかなり使えたので紹介します。 概要 Alixはa11y.cssを元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。 Chrome ウェブストア GitHub 使い方 Chromeを立ち上げ、Chrome ウェブストアよりインストールします。 Chromeの右上に><という形をしたAlixのアイコンが表示されるのでクリック。 すると設定画面が表示されます。 LanguageはEnglishを（残念ながら日本語はありません）選択。 通知レベルはEverything（旧式の書き方、注意とエラー、アドバイス）, Obsolete Stuff, Warnings & Er
Chrome ウェブストア - Web Developer
Adds a toolbar button with various web developer tools.
どんなWebページも3D化してしまうFirefoxのエクステンション「Tilt」
これからのレイアウトは上下左右だけでなくて奥行きも考えるようになるのかも。HTMLを解析し、DOMツリーの階層をWebGLを使って3D化してこうれるFirefoxのエクステンション「Tilt」の紹介です。 実際に「Tilt」を動作させているデモ動画です。 Tilt 3D Firefox Test Hero-Gamers – YouTube ソースコードと最新のXPIファイルはこちらから入手出来ます。 victorporof/Tilt at master – GitHub XPIファイルのみダウンロード・インストールしたい場合はこちらのリンクからどうぞ。 https://github.com/victorporof/Tilt/raw/master/bin/Tilt.xpi 操作方法はとても簡単、メニューバーの「ツール」から「Tilt」をクリックすると動作します。 このような感じで動作します。
ng-inspector - The AngularJS inspector pane for your browser
ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you develop, debug and understand your AngularJS applications. Crypto users will benefit from these browser extensions in order to get the most out of their research. There are similar browser extensions for crypto users and traders that helps them with cryptocurrency trading and help them to tak
簡単にSEO状況を確認することができるChrome拡張機能「AdMatrix Analytics」｜男子ハック
気になるページで拡張機能を使うだけで簡単に各種情報を一覧表示SEO状況を確認できるとタイトルに書かせてもらいましたが、具体的に何ができるのかというと指定したキーワードに対しての「h1」などのタグの状況や、被リンクの状態、タグの内容などを確認することができる拡張機能です。 ChromeとFirefox用に拡張機能が提供されていて、Webページを表示した状態で拡張機能をオンにすると画面下に被さる形で情報が表示されます。 テキスト量やSEOキーワードの状況などが表示されて便利。タブを切り替えることで被リンク数なども表示できます。 サイトマッピング機能をオンにするとサイト内のタグに対してマークがついてサイト内でどこにタグが使われているか簡単にわかります。 自分のサイトで使うもよし、参考にしたいサイトで使うもよし、解析ツールというよりも情報を見やすく表示してくれるツールという印象が強いですがなかなか
モバイルアプリ・Web開発にオススメの Chrome 拡張機能 10選 - Tech Blog
カップル専用アプリPairyでおなじみ株式会社TIMERSのCTOの椎名アマドです。 先日うちの社員と話してて自分が普段使ってるChrome拡張機能をしれっと紹介したら、 「生産性が上がる」とだいぶ好評価でした。 なので今回は、モバイルアプリやスマートフォンWeb開発などに役立ってる、Chromeの拡張機能を紹介します。 使う使わないでかなり生産性が変わってくるものもあるので、是非活用してみてください。 API開発に最適 JSONView オススメ度：★★★★★ JSONで来たレスポンスを、綺麗に最適化して表示してくれます。 わかりやすく色分けハイライトされてたり、配列を畳むことが出来たりと、 APIを絡めた開発では必需品です。 Postman - REST Client オススメ度：★★★★★ REST リクエストをその場で作成して送信できるクライアントツールです。 GET/POST/D
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Twigエクステンションの作り方
Python Programming Essentials - M16 - Control Flow Statements and LoopsP3 InfoTech Solutions Pvt. Ltd.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発者向けの定番拡張機能「Firebug」が開発終了／「Firefox Quantum（Firefox 57）」のリリースを機に、12年の歴史に終止符を打つ
wp.wizard-g.net | Wizard-G
blunck.info
Digital Marketing Agency Perth » Online Marketing - BirdBrain ⚡
FireFoxでPHPをデバッグ
ChromeのツールバーでGoogle Analyticsのアクセス解析がひと目でわかる「Stats Checker for Google Analytics」 - iTea3.0
