ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
Chrome の console.log でハマらないために
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
シニアフロントエンド開発者みたいに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 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 を入力することで取得で
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
CSSファイルから未使用のスタイルを削除する4つの方法
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。 4 Ways to Remove Unused CSS by Chidume Nnamdi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 再利用可能なUIコンポーネント内の未使用CSS 1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法 2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法
Google Analyticsで自分のページの解析結果がすぐにわかるGoogle公式Chrome拡張機能「Page Analytics (by Google)」
Google アナリティクスの直近1カ月におけるページビュー数・ユニークプレビュー数・そのページでの平均的な滞在時間・直帰率・離脱率などをウェブページを開くだけで自動的に表示してくれるようになるGoogle Chrome拡張機能が「Page Analytics (by Google)」です。わざわざGoogle アナリティクスにアクセスしなくてもボタン1つ押すだけで使えるようになっており、非常に便利そうだったので、実際に使ってみました。 Chrome ウェブストア - Page Analytics (by Google) https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh まずはウェブページにある「無料」というボタンをクリック。 「Page A
モバイルアプリ・Web開発にオススメの Chrome 拡張機能 10選 - Tech Blog
カップル専用アプリPairyでおなじみ株式会社TIMERSのCTOの椎名アマドです。 先日うちの社員と話してて自分が普段使ってるChrome拡張機能をしれっと紹介したら、 「生産性が上がる」とだいぶ好評価でした。 なので今回は、モバイルアプリやスマートフォンWeb開発などに役立ってる、Chromeの拡張機能を紹介します。 使う使わないでかなり生産性が変わってくるものもあるので、是非活用してみてください。 API開発に最適 JSONView オススメ度：★★★★★ JSONで来たレスポンスを、綺麗に最適化して表示してくれます。 わかりやすく色分けハイライトされてたり、配列を畳むことが出来たりと、 APIを絡めた開発では必需品です。 Postman - REST Client オススメ度：★★★★★ REST リクエストをその場で作成して送信できるクライアントツールです。 GET/POST/D
はてなブックマークのChrome Extensionを外した — どこか遠くでのんびり怠惰に暮らしたい
はてなブックマークのChrome Extensionを外した 以前からGoogleで検索して、検索結果ページを表示→どれかのページへ遷移→戻るボタンクリックとしたときに、 なぜか検索結果一覧ページじゃなくて、さらにもうひとつ前のページに戻ってしまう現象があって、 なんでこんなことになるんだろうとおもってたんだけど、どうもはてブのExtensionのせいだったらしい。 ふと「chrome google 検索 戻れない」で検索したら、 このページ がひっかかって、あ、もしかして、どれかextensionが悪さしているかなとおもって、順番にはずしていったところ、はてブのextensionだった。 たぶん、検索結果全部のURLのはてブ数をだしてるあたりの処理が終わらない間に、リンクをクリックしちゃって次のページに遷移すると、戻れなくなるのではないかという気がしてる。 まあ、そんなこんなでexten
URLやタイトルを含むリンクタグが簡単に作成できるChrome拡張 | mugen beer
リンクタグが簡単に作成できるChrome拡張のCreate Linkを紹介。オススメのサイトをまとめるときや、記事を書いてて複数出展があるとき、いちいちリンクを作るのが面倒でした。リンクタグが簡単に作成できるChrome拡張のCreate Linkを導入したら、リンクをまとめるのがとっても楽になったし、時間がかなり短縮されたよ。 Chrome使ってる人しか使えないけど、せっかくなのでシェアしておくます。 導入 こちらからChromeに追加。 ここは特に説明不要ですよね。 使用方法 リンクを作成したいWebページを開いて、右クリックするとCreate Linkが追加されています。 ここでHTMLを選択するとページタイトルとURLの入力されたリンクがクリップボードにコピーされる。 Googleの場合だとこんな感じのタグになります。 <a href="https://www.google.c
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
『Chrome Developer Tools』の裏ワザまとめ | IDEA*IDEA
ドットインストール代表のライフハックブログ
Chromeでフローチャートやマインドマップを簡単に作図できる LucidChartで遊ぼう!! - 週刊アスキー
『LucidChart』はブラウザー上でさまざまな図を手早く簡単に作成できる作図ツールだ。豊富なテンプレートを元に、さまざまなシェイプをドラッグ・アンド・ドロップで配置。シェイプどうしを線でつないだり色分けすることで、専用ソフトにもひけを取らない本格的な作図を行なえる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
http://buchineko.website/chrome-devtools-cording/
ソニック速報
まとめよう、あつまろう - Togetter
複数タブを開いているChromeを軽くしてくれる拡張機能『The Great Suspender』 | ライフハッカー・ジャパン
リミックスを生成し続ける「無限のジュークボックス」