Which ports are considered unsafe on Chrome - Super UserStack Exchange Network Stack Exchange network consists of 183 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers. Visit Stack Exchange
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
React Developer Toolsのすすめ - Qiita
2019年9月~29歳で未経験から営業→エンジニアになった私が、 脱未経験エンジニアを目指して、業務の中で学んだこと、会社の業務について書いています。 私の現状については最初の投稿をご参照ください。 [最初の投稿] 最近はReact/Reduxでの開発がメインとなっており、 開発中の画面やデバッグの際にReact Developer Toolsを使用することで 効率的に作業が進められるようになったので簡単に紹介します。 React Developer Toolsについて Facebookから提供されている公式のReact用のデバッグツールです。 このツールを使用することで、下記のことをしながら作ったページの状態を確認して作業ができます。 コンポーネントの構造を視覚的に把握できる コンポーネント間で渡されているPropsの値が確認できる Stateの値が確認できる 実際に値を変えて動作の確認
Chrome 拡張機能でリクエストヘッダをカスタマイズする方法
はじめにChrome 拡張機能で外部サイトへの HTTP リクエスト時に Request Headers をカスタマイズする方法について整理した。 User Agent を変更したり、Cookie を付与したり、色々とできるようになる。 TL;DR chrome.webRequest.onBeforeSendHeaders を使う 一部の内容はイベントハンドラ内で参照できないし、設定しても保証されない User Agent を変更したり、Cookie を付与したりできる 目次はじめにTL;DR環境・条件詳細Chrome 拡張機能のライフサイクル実装方法manifest.jsonbackground.jsまとめ参考文献 環境・条件Google Chrome バージョン: 78.0.3904.108（Official Build） （64 ビット） 詳細リポジトリ: 17number/chro
サクッと時短！ 新機能Chromeアクションを使って各機能を直接実行する方法
サクッと時短！ 新機能Chromeアクションを使って各機能を直接実行する方法2021.01.06 22:0020,670 David Nield - Gizmodo US ［原文］ （ たもり ） アドレスバーからタスクを直接実行できる、超絶便利な時短テク。 Chromeの最新バージョン｢Chrome 87｣にはとても便利な新機能、Chromeアクションが導入されました。これはブラウザのメニューをたどっていかなくても、ブラウザのアドレスバー（オムニボックス）からさまざまなツールや操作を直接実行できるようになる機能です。 この機能は徐々にロールアウトされるとGoogleが発表しているので、まだ見ることはないかもしれません。でも、Chromeが最新版に更新されているかどうかは、ブラウザメニューの｢ヘルプ｣-｢Google Chromeについて｣から確認しておきましょう。 Chromeアクション
Chrome85でWebサイトの流入元がとれない問題と対応方法 - paiza times
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
OneTab extension for Google Chrome and Firefox - save up to 95% memory and reduce tab clutter
Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once. When your tabs are in the OneTab list, you will save up to 95% of memory because you will have reduced the number of tabs open in Google Chrome. OneTab is designed for privacy. Your tab URLs ar
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
【全国のタバーに捧ぐ】大量のGoogle Chromeタブを効率よく管理する 5つのTips | DevelopersIO
どうも、ちゃだいん（@chazuke4649）です。 突然ですがみなさん、Google Chromeのタブは好きですか？ 好きも嫌いもなく、ただ仕事でもプライベートでもインターネットで調べ物をしている人は、ブラウザのタブを複数立ち上げているのではないでしょうか。そして、アレコレ深く堀理下げていくうちに、いつの間にか大量のタブがずらっと並んでいる光景を目の当たりにしてきたのではないでしょうか。 私もその一人です。当エントリでは、以下のようなケースに当てはまる方をタバー（Tabber≒タブを多用する者）と呼ぶことにします。 タブをよく開く方だ 一つのタブ内でページを移動するより、リンクは別タブで開く方が好きだ 新しいタブはどんどん開くが、古いタブを閉じるのは嫌いだ （もしかするとあとでやっぱり必要になるかもしれないから） 「さっきのページ、どれだっけ？」と、大量タブから探し出す作業にうんざりし
Gmail で暗号化メールを送信する (FlowCrypt) - ブログ
Gmail 上で、PGP (Pretty Good Privacy) による暗号化を使用する 本記事に目を通すよりも、手を動かしたほうが早いので、FlowCrypt のページを参照のこと 前提 説明しないこと 手順 FlowCrypt のセットアップ 拡張機能のインストール 初期化 Gmail から暗号化メールを送ってみる Links 前提 メールクライアントに Gmail を利用している Google Chrome を利用している (Firefox, Android でも可) 説明しないこと 暗号化メールを受け取った側が、それを複合化する方法 暗号化を無効化し、署名付きでのみメールを送信する方法 公開鍵を添付することで、メールの受信側が暗号化したメールを返信する方法 手順 簡単な手順としては次の2点： FlowCrypt のセットアップ Gmail から暗号化したメールを送ってみる Fl
Protecting users from insecure downloads in Google Chrome
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた - Qiita
Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー本人の意図した動作であることを検証していないため
なぜChromeはURLを殺そうとするのか？ (Chrome Dev Summit 2019) - ぼちぼち日記
今年もChrome開発者の集まりChrome Dev Summit 2019 (CDS) がサンフランシスコで開催されました。 今回、私が Chrome Customer Advisory Board (CAB) に選出していただいたこともあり、CDSに初めて参加しました。 これは、CDS終了後のCAB meetingで頂いたChrome Dinosaurフィギュアです。ちなみにゲームはできません。 タイトルの「なぜChromeはURLを殺そうとするのか？」は、2日目Chrome Leadsのパネルセッションで司会のGooglerが、Chrome UX担当のProduct Managerに対して一番最初に投げかけた問いです。 PMは直ちに「そんなことはしない」と即答しました。しかしChromeは、URLの表示領域からHTTPSの緑色表示の廃止・EV表示場所の移動・wwwサブドメイン表示の削
ノーコードでWebページをスクレイプできるChrome拡張「AnyPicker」
◆ AnyPicker https://anypicker.ryang-studio.com/ 紹介 「AnyPicker」は、ノーコードでWebページをスクレイプできるChrome拡張ツールです。 Chrome拡張機能をインストール後、スクレイプするWebサイトを開くとこのようなサイドバーが出現します。 STEPは全部で5つあり、その1つ目がこちら。今回は初めての登録なので「New recipe」を選択します。 続いてSTEP2、ここで実際にスクレイプするコンポーネントを登録していきます。 取得対象にカーソルを合わせてクリックすると フィールドとバリューが取得できます。 同じ要領で、ピックアップ全部のタイトルを選択しました。 なお、フィールド値は自由に設定可能。後にアウトプットデータのKey値になるので、取得しやすい英単語が好ましいでしょう。 続いてSTEP3は、リンク元を取得＆サジェス
「タブのグループ化」など2019年秋に登場するChromeの新機能まとめ
Googleが、リリース10周年を迎えたChromeへ新たに追加する予定の機能を発表しました。2019年秋にアップデートされるアプリ版Chromeでは、「タブのグループ化」や「ほかのデバイスのChromeとのタブ共有」などが盛り込まれるほか、アプリ版とPC版の両方でタブや検索バーの機能が強化されるとのことです。 Get more done with a little help from Google Chrome https://blog.google/products/chrome/get-more-done-with-google-chrome/ ◆タブをグループにまとめる 新機能が実装されたAndroid版Chromeでは、アプリ版Firefoxのようなグリッドレイアウトによるタブ選択画面が採用されています。なお、iOS版のChromeはすでにこのレイアウトになっています。 この画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
新規タブリンクの恐ろしい仕様、Chrome 88で変更へ ～Safari/Firefoxに合わせた安全な仕様に／“rel=noopener”を付け忘れても大丈夫【やじうまの杜】
メモリ食いのGoogle Chrome、ついに消費量削減へ
