ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
ブラウザ拡張機能を作るためのReactフレームワーク『Plasmo』
Plasmoとは Plasmoはブラウザ拡張機能を作成するためのReactフレームワークです。 テストや自動デプロイするための機能なども提供しておりオールインワンなフレームワークとなっています。 公式サイトに行くと「ブラウザ拡張機能におけるNext.js」という強気なワードが確認できます。 It's like Next.js for browser extensions! Plasmoの特徴 Plasmoは以下のような特徴を持ったフレームワークです（公式より一部抜粋）。 ファーストクラスのReact＋Typescriptサポート ライブリローディング + React HMR .env* ファイルサポート BPP による自動デプロイメント Svelte と Vue をオプションでサポート またゼロコンフィグで開発を始めることができ、ブラウザ拡張機能の設定ファイルであるmanifest.jso
【Next.js和訳】Advanced Features/Debugging
この記事について この記事は、Advanced Features/Debuggingの記事を和訳したものです。 記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。 デバッグ このドキュメントでは、Chrome DevToolsまたはVSCode debuggerを使用して、ソースマップを完全にサポートしながら Next.js のフロントエンドとバックエンドのコードをデバッグする方法について説明します。 この方法では、まずターミナルで Next.js のアプリケーションをデバッグモードで起動し、そこにインスペクタ（Chrome DevTools または VS Code）を接続する必要があります。 Next.js アプリケーションのデバッグに必要なのは、Node.js デバッガを公開し、インスペクタークライアントを起動することだけなので、他にも方法があるか
Chrome拡張の作り方 (超概要) - Qiita
【更新情報】 ・2020.12.25 別記事でこの記事の「ガチのやつ」にフォーカスしたものを書きました！ ▼ kintoneのスレッド投稿がスマートになるChrome拡張をVue.jsで作る https://qiita.com/RyBB/items/3f343252b0397e93050e これからChrome拡張を始めたいという方はこのままこの記事を読むと良いと思います！ がっつり開発するとどんなことができるか知りたい方は上のリンクの記事を読むと良いと思います！ はじめに 普段、Chrome拡張使ってますか？ そもそもChrome使ってますか？ 使っている方であればわかると思いますが、 Chrome拡張はとても便利な機能です。ブラウザを自分流にカスタマイズすることができます！ そんなChrome拡張はストアからインストールするだけでなく、 自作 することもできます！ (ストアに公開しなけ
今は、もう、動かない、その User-Agent 文字列
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか？ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
ウェブの進化とウェブブラウザ開発の最前線
学部 3, 4 年生向けの特別講義で『ウェブの進化とウェブブラウザ開発の最前線』というタイトルで話をしてきました。 ウェブの進化の歴史を知ることで現在のトレンドについて理解し、またウェブブラウザというグローバルで大規模なソフトウェアの開発の一端を垣間見ることで、ウェブやウェブブラウザの開発に少しでも興味を持ってくれたら良いなぁという気持ちで話をしてきました。 なお歴史観については私の事実誤認も含まれると思うので、間違いを見つけたら教えて下さい :-) 追記 (随時) たくさんの反応を頂きありがとうございます！次回同じような資料を作るときの参考にできるよう、ここにメモしていきます。ウェブは無限に話せる話題があって楽しいですね！ ウェブ以前のハイパーテキストの歴史も取り入れるべきでは？ ありがとうございます！おっしゃるとおりで、ウェブの進化史と言いつつウェブが公開されてからの話しかしていないの
JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャ
プログラミングおよびプログラミング言語ワークショップ（PPL）が開催したサマースクール「JavaScript 処理系と Chrome ブラウザの実装技術」にて、JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャについて話をしてきました。 本発表では、主にブラウザ JavaScript に関する歴史や最新動向に関する概説と、ウェブ特有の実行モデルをどのようにブラウザアーキテクチャへ落とし込んでいるか紹介しました（スライドへのリンク） Chrome ブラウザでは JavaScript 処理系として V8 を、そしてそれを駆動するレンダリングエンジンとして Blink を組み込んでいます。本発表では Chrome がウェブ特有の実行モデルやセキュリティモデルを守りながらどのように V8 と Blink を協調させているのか、そのアーキテクチャを紹介します。
Remote debug Android devices | Chrome DevTools | Chrome for Developers
Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to: Set up your Android device for remote debugging, and discover it from your development machine. Inspect and debug live content on your Android device from your development machine. Screencast content from your Android device onto a DevTools instance on your development machin
Chrome92からalertやconfirmが動かなくなりました ★🌴 🌴 officeの杜 🥥
以前、Chrome83の際には、アップデート後に、Google Apps Scriptでのボタンクリック時にPDFがダウンロードといった事ができなくなり、非常に困った事態になりました。その後、XFrameOptionsModeでの挙動で、Google Apps Scriptの場合にはtarget属性にblankを指定して、対処することが出来ました。 さて、今回、Chrome92では地味ながら、かなり大きな変更があり、Google Apps Scriptでalertやconfirmが利用できなくなりました。Salesforceなどの外部のサービスでも影響が出ているようです。 ※2021/08/03 - 今朝再度、確認したらGoogle Apps Scriptでのalert,confirmの挙動ができるようになっていました。修正されたのか？しかし、今後何があるかわからないので、alert,co
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
【Chrome】Web開発で使えるオススメ拡張機能10選 - MEMO REC
Web開発においておすすめするChromeの拡張機能をまとめましたので、メモします。 ColorZilla（カラーピッカー） Awesome Screenshot（スクリーンショット取得） jsoff（JSをOFFにする） The QR Code Extention（QRコード生成） Link Checker（リンク切れチェック） Redirect Path One Tab テキストエンコーディング JSONview（Jsonビューア） Proxy SwitchyOmega（Proxy切り替えツール） ColorZilla（カラーピッカー） 起動するとカーソルが表示されて、 カーソルが合った場所の色情報を取得する事ができます。 取得した色情報（カラーコード）はクリップボードに保存されているので、 Ctrl+vなどでcssに貼り付ければそのまま利用できます。 chrome.google.co
開発者たちが明かすGoogle Chromeが目指すものとは｜【Tech総研】
だが、実のところユーザーには、こうした進化ぶりが見た目にはわからなかったりする。それが、Google Chromeの面白いところかもしれない。 「例えばユーザーインターフェースは、最初のバージョンから大きく変わっていません。見た目はほとんど変わらない。進化しているのは、裏の技術やスピードです。ユーザーにとっての主役はコンテンツであり、Webアプリケーション。UIは最低限に収めたほうがいい。開発コンセプトは大きく3つでした。“シンプルさ、速さ、セキュリティ”です」 Google Chromeといえば、速さが魅力という声が聞こえてくることも多いが、それは単なる処理スピードの話ではない。 「表示スピードをさらに速くするためにどうするか、さまざまなアイデアが盛り込まれています。例えば、オムニボックスとも呼ばれるアドレスバー。すべてのアドレスを入力しなくても、タイプの途中でもたどり着きたいページの候
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
Chromium版「Microsoft Edge」は自動更新で配信（ブロック方法あり）
米Microsoftは12月17日（現地時間）、ユーザー向けドキュメントで、Chromium版「Microsoft Edge」の自動配信を無効にするBlocker Toolkitについて説明した。 Chromium版Microsoft Edge（以下、新Edge）の正式版は2020年1月15日にリリースの予定だ。17日公開のドキュメントによると、新Edgeは「Windows 10」のバージョン1803（April 2018 Update）以降搭載の端末に、自動更新で配信されるという。Blocker Toolkitは、この自動更新をブロックするための企業向けのツールだ。 11月12日のドキュメントによると、新Edgeをインストールすると、現行バージョンのEdgeのスタートメニューへのピン留めやタイル、ショートカットはすべて新Edgeに移行され、現行Edgeの設定、アプリ、ファイル、プロトコル
貴方はいくつ知っている？あまり知られていない便利なChrome DevToolsの機能まとめ - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのフロントエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2019」10日目の記事となります。 概要 Web系の開発をしているエンジニアであれば、Chrome DevToolsをよく利用されている方も多いかと思います。 特にフロントエンドエンジニアであれば、毎日のように、お世話になっているのではないでしょうか？ しかし、Chrome DevToolsは多機能であるがゆえ、あまり知られていない機能も多いはず。 そこで、この記事では、私が普段よく使っている機能や、今年になって知った便利な機能、面白い機能をまとめて紹介して行きたいと思います。 Console編 CSS - consoleを華やかに console.log('%cHello Qiita',
Google Chromeスクショ術 - mottox2 blog
技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > Commandからスクリーンショットを撮るCommandからスクリーンショットを撮る Chrome DevToolsに慣れている方はご存知かもしれませんが、ChromeにはCommandという概念があります。 Cmd + Option + iでDevToolsを開きCmd + Shift + Pを押してください。 すると次のような入力フォームと項目が出現します。 フォームに文字を入力すると、Commandを絞りこむことができEnterで指定したアクションを実行することが出来ます。 ここにある、「Capture area screenshot」、「Capture full size screenshot
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
Web APIの動作確認を簡単に行えるChrome拡張 - Qiita
Postman 今まではcurlコマンドをしこしこ叩いてましたが、PostmanというChrome拡張が便利です。 指定可能なもの APIのURL HTTPメソッド URLパラメータ HTTPヘッダ リクエストボディ 辺りを指定してWeb APIを実行することができます。 ファイルアップロードや、Basic認証、OAuth 1.0を簡単に叩けたりもします。 レスポンス レスポンスの色付けをしてくれたり、フォーマットしてくれたりします。 リクエストの履歴 過去に叩いたリクエストを覚えていてくれていて、簡単に以前叩いたのと同じAPIを実行できます。 コレクション あと、便利なのがコレクションという機能で、過去に実行したAPIの履歴をグルーピングして管理することもできます。 なので、Aという製品のAPI動作確認用のグループとBという製品のグループを分けて作ることで管理しやすくなります。 Regi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
https://cs.chromium.org/chromium/src/headless/app/headless_shell_switches.cc