デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
【Google Chrome】位置情報を変更してPCの現在地を自由自在に設定
Webブラウザが示す現在地の位置情報を変更したい 現在地の位置情報を必要とするネットサービスを利用していると、実際の現在地とWebブラウザ上での現在地がずれていることがよくあります。特にPCでは珍しくありません。さらには現在地の取得に失敗することすらあります。 PCの場合、この現象はいつまで経っても直らないことが多く、できることならWebブラウザの設定変更で解決したくなります。 その他にもWebブラウザの現在地を変えたくなることはあります。例えばGoogle検索は、現在地によって検索結果を最適化するので、SEO（検索エンジン最適化）では現在地を変えつつ検索結果を確認したくなることがあります。MEO（Map Engine Optimization：マップ検索エンジン最適化）も同様です。 しかし、Webブラウザを実行しているデバイス（端末）を物理的に移動させながら調査していたら、手間も旅費も掛
Chrome、Safari等ブラウザのショートカットキーを無効化する方法【Mac編】
最近、僕のMacBookAirがすごく敏感になった。 特にGoogleChromeを使用中に、その症状が起こる。 僕が少し速く触れるだけでビクッと敏感に反応し、勘違いした相手がこちらが望んでいない全く気持ちよく無い行為（ショートカットキー誤作動）で返すのである。 長年連れ添ってきたパートナーだけに、僕は少し悲しくなった。 それも仕方がないことで、僕の愛用のMacBookAir6,1 Mojave（洗礼名：シエラ）ちゃんは、2013年7月生まれ。 一般的にパソコンの寿命の目安は７〜１０年と言われているので、人間の年齢で言えばおばあちゃんなのである。 が、これまで一緒に多くの場所を旅した彼女を今更手放す気も、お金が掛かる最近の子に乗り換える気も毛頭無いので、なんとか方法を探してみました。
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
まだトラックパッドでChromeを操作しているの？ そろそろキーボードだけで操作しようぜ！！ Chromeを使い倒そう！！ - Qiita
アドレスバーは使いこなせていますか？ アドレスバーに検索したい文字を入力するとGoogleで検索できますよね？ 検索したいサイトっていろいろありますよね？ Amazonで検索したい時、楽天で検索したい時、何かの言語のリファレンスサイトから検索したい時など検索したいサイトってたくさんありますよね？ 検索対象のサイト（検索エンジン）って簡単に切り替えることができることって知ってますか？ アドレスバーのカスタマイズについて アドレスバーを右クリックして検索エンジンの編集を選択して下さい 検索エンジンの管理画面へ遷移します 規定の検索エンジンというところがアドレスバーに文字を入力して検索されるサイトになります。私の場合ですと、Googleになっています。 「私はYahooじゃないとダメなんだ」という人はここをYahooにすれば常にYahooで検索されるようになります。 その他の検索エンジンというと
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
【裏技】みんな知らないログイン必須ページの爆速スクレイピング【モテるシェル芸】 - ps aux | grep serinuntius
おはようございます。 裏技ってつけると急にワザップ感が出て、懐かしいですよね〜。 こないだ飲み会で同期とそんな話をしておりました。 本題 ログインが必要なWebサイトで画像を引っこ抜いて欲しいという依頼があり、スクリプトを書くかな〜と迷ったんですが、よく考えたらシェル芸だけで出来るな〜と思ったので共有したいと思います。 今回はデザイナーにGitHubのIssueに貼ってある画像200枚以上をzipで欲しいって言われたので、それを題材にします。 環境 Chrome curl grep egrep やり方 1. Chromeでおもむろにデベロッパーツールを開く Macなら Shift + Cmd + c等で開けます。 2. networkを選択する そのページのリクエストを見つける たぶん、一番上のはず。 3. 右クリックして、Copy as cURLを選択 今回の肝はこれで、ブラウザで送った
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
