PCでAndroid Chromeをデバッグする
Webアプリを作っていると、PCでは問題なく動いていたのにデプロイしてスマホからアクセスすると動かない状況に遭遇することがあります。特にPWAなどはPC版のChromeとAndroid版のChromeで仕様が異なるため、PCで使えていたAPIが使えなかったり、挙動が変わったりします。 Android Chromeをエミュレートできれば、例えば以下のようにAndroidでのAdd to home screen(A2HS)の挙動が確認できます。 今回はPC上でAndroidのChromeをデバッグする方法を説明します。 AndroidスマートフォンのUSBデバッグを使う方法 手元にAndroidのスマホがある場合はUSBデバッグを使うのが一番楽です。 まずは以下の手順に従ってスマホのUSBデバッグを有効にします スマホで設定→デバイス情報と移動して、ビルド番号を7回タップします。暗証番号を求め
Chrome DevTools MCPでWeb開発のチェックを自動化！Playwright MCPとの違いは？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 フロントエンド開発でコンソールエラーをいちいちコピーしたり、スクリーンショットを撮ってAIに渡したりするの、地味に面倒ですよね。 実は私も、ローカル環境でのテストでエラーが出るたびに、DevToolsを開いてエラーメッセージをコピーして、Claude Codeに貼り付けて...という作業を繰り返していました。 そこで以前ご紹介したPlaywright MCPでかなり楽になったのですが、さらに便利なツールが登場しました。 結論から言いますと、Chromeだけを対象にしたウェブ開発であれば、Chrome DevTo
UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita
WEBサイトにアクセスしてくる利用者の情報をUserAgentから調べることが出来るが、どんな情報がわかるか調べてみた。より詳しい情報は参考に使ったサイトを参照で。 はじめに GoogleがChromeにおいてユーザーエージェント文字列を段階的に廃止することを発表しています。 段階的にUserAgentが削除版UA文字列に置き換わっていきChrome 113で完全に削減版の UA 文字列となってしまいます。 削除版のUA文字列は以下の通りです。 User-Agent Reduction # Desktop (user on Windows 8.1, for example) # 旧 UA文字列 Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56
URLの最大文字数って結局いくつなのさ～IE亡き後の新常識を探る - Qiita
まえがき 株式会社ピーアールオー（あったらいいな！を作ります） Advent Calendar 2021 の14日目になります。 前日は @s_arakawa626 さんの「脆弱性のあるサーバーを簡単に立ててサイバー攻撃を体験したい」でした。 URLの最大長はIEによって決められていた問題 周知の事実だと思うのですが、URLの長さに仕様としての決めはないのに、IEが2083文字までしか利用できないため、Webの世界ではURLの最大長は2083というのが事実上の標準というか、常識になっていましたよね。。。 URLの長さの仕様は本当にないのか？問題 URLに関する仕様と言えばRFCですね。URLに関するRFCは、RFC2616とRFC3986が原典となります。2616と3986の記載には、たとえばURLで使用できる文字種について違いがあったりでしばしば現場に混乱をもたらしていますが、ことURL
AndroidのChromeでBASIC認証のIDとパスワードを自動入力してくれなくなって困っているみなさまへ - nomolkのブログ
AndroidのChromeでBASIC認証が出たときにIDとパスワードが自動入力されず困っているみなさんへ… URL欄に「chrome://flags/」と入れると設定画面が出てくるので、そこで「Fill passwords across affiliated websites.」を探してdisabled.に変更、Relaunchすると直るよ— メルセデスベン子 (@nomolk) 2024年1月23日 BASIC認証というのは非公開のWEBサイトで使われる簡易的な認証で、こういう感じでポップアップしてくるやつのことです。 以前までは一度ログインしたサイトはこんなかんじで パスワードマネージャがIDとパスワードを覚えて自動入力してくれたと思うのですが、なぜか昨年12月頃からやってくれなくなりました。一回認証を閉じてパスワードマネージャを検索しなければいけないので面倒にもほどがある。その対
2021年版 主要なアプリ内ブラウザのUserAgentを調べてみた & 判定を実装してみた
アプリ内ブラウザによって挙動が違うと、時にはグッとこらえてUserAgentによる条件分岐を入れなくてはいけないということもあるでしょう。 本当はこんな条件分岐入れたくない。でも、長い人生では止むに止まれぬ大人の事情というものがあります。 ...さて、どう判定しよう？ ざっと調べたところ少し古い情報しか見当たらなかったので、自分で調べてみました。 2021年6月27日時点、手元の iPhone 12 Pro(iOS 14.5) Pixel 4(Android 11) を使って各アプリの（おそらく）最新版を使って調査しました。 それをもとに作成した、JavaScript (ES6)による実装例もつけてあります。間違いやもっといい方法などあればぜひコメントください。 テストコード付きの実装例はこちらから。 UserAgentの実例集め 対象にしたアプリは以下の通り： Twitter Faceb
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動されると何ができるのか ご存知の方には特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 表示・動作はChrome 50.0.2661.87mで確認したものになります(2016-05-11) タブやパネルの位置は環境によって異なる可能性がありま
スマートフォンアプリ・ブラウザ拡張機能
拡張ボタンからページ遷移なしでブックマーク！ ブラウザメニューのB!ボタンをクリックするだけで完了。 コメントやタグを付けて素早く保存できる公式ツールです。 使い方をみる
Google ChromeでUserAgentを変更する - Qiita
この記事について Google Chromeに備わった機能を使ってUserAgentを偽装する方法を2種類紹介します。 特定のOSだったら○○する、特定の機種だったら☓☓するといった処理の動作確認に便利です。 ※Google Chrome 55（2016/12/18現在最新版）で確認した内容になります。 その１：デバイスエミュレータ機能を使う 概要 デバイスエミュレータ機能を使うと、UserAgentの偽装はもちろん、ページの表示領域の再現等もできます。 動作確認の内容が「iPhoneで見た時〜」「Androidで見た時〜」ぐらいの粒度ならこちらの方法で事足ります。 手順 １. Developer Toolsを開く Windowsなら「F12」、Macなら「Control + Option + I」でDeveloper Toolsを開きます。 開くとこんな感じの画面が出現します。 ２. d
GUIテストツール一覧 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? GUI(グラフィックユーザーインターフェース)テストツールについての比較 現場での：GUIテストツール導入にあたり 「メリット」 と 「デメリット」 を纏めてみました。 （昨今、GUIテストツールの数が多く何が、どのテストツールとマッチしているのかも含め。） 今まで色々とGUIテストツールの導入検討してきましたが、業務タスクに沿った選定ができればと思い、纏めております。 GUIテストツールには有償・無償ありますが、「費用対効果も含め」 選定ができれば尚良し。 Seleniumファミリーだけではなく、最近のテストツールトレンド傾向を調査し
ChromeデべロッパーツールでPOSTされたパラメータの中身を確認する
ChromeデべロッパーツールでPOSTされたパラメータの中身を確認する GETでパラメータを渡す場合は、URLを見ればどんなデータが渡されたのかわかりますが、POSTの場合はURLが変わりません。Chromeデベロッパーツール（Chrome Developer Tools）を使えばPOSTで渡したパラメータの内容を確認する事ができます。 Google Chromeで調べたいページを開き、Macなら（オプション+コマンド+i）Windowsなら（fn+f12）、もしくは右クリックで「検証」をクリックするとデベロッパーツールが開きます。 例えば、以下のようなフォームをPOST送信した場合、 デベロッパーツールでは送信された内容を以下のように確認する事ができます。 「Network」をクリックします。 「Record network log」の部分で、ここが赤くなっているかを確認します。
Seleniumを安定稼働させるために行うべき３つの設定(Headlessモードにも対応)
この記事では、Seleniumでクローリング・スクレイピングを実践で安定稼働させるために行うべき設定を3つにまとめました。 待機処理 エラー内容を通知する 処理をリトライする ちゃんと設定すれば、不安定なSeleniumでも、安定して定期実行できるようになるでしょう…！ 厳しいことを言うと、苦労して作ったSeleniumテストが不安定だったら現場には無価値ですしね〜。 この記事にまとめた内容が活かされて、安定したクローリング・スクレイピングが行えるようになったら…と祈るばかりです。 待機処理 Seleniumを使用したクローリング・スクレイピングのプログラムを安定稼働させるために、まず設定して欲しい項目があります。 それは、Web Driverの待機処理を追加することです。 Seleniumのエラーの原因は、find_element_xxxメソッドで、指定した要素が見つからないことが95%
Selenuimで要素を選択する方法まとめ - Qiita
Seleniumの findElement, findElementsメソッドでHTML要素を選択する方法のまとめです。 個人的に(自動生成された等の理由により)カスタマイズ不可なサイトをテストすることが多く、主に次の画面に遷移する際の要素選択について、使ったことのあるパターンをまとめてみました。 各項のスクリーンショットは、上がサイトの例、下がChromeの検証機能(デベロッパーツール)で要素を表示したものです。なるべくそのまま載せるようにしましたが、Qiita用に横幅を短くしたり、実データは削除したりと、多少修正しているものもあります。 1) id属性 で検索 id属性 で検索できる例： 目的のHTML要素にid属性 が設定してある場合、それを指定して検索するだけです。
Selenium・Pythonを用いた動的Webサイトのスクレイピング（初心者用） - Qiita
(2026/1/9追記) 以下の内容は、seleniumのアップデートに伴いoutdatedになってしまっており、コードもそのままでは動かない状態になっています。すみませんが、直近の他のエントリを参照して頂いた方が良いかもしれません。 0 モチベーション 本稿は、スクレイピング初心者のPython使いを対象として書きました。筆者自身もスクレイピングの知識が不十分なところもあるかと思いますので、何かあればご指摘いただければと思います…。 スクレイピングに用いるモジュールとしては、urllibやbeautifulsoupなどがありますが、これらのモジュールでは動的なサイト（airbnbなど検索機能を用いたりする、javascriptなどを用いて構築されたサイト）は取得できません。 これらの動的なサイトのスクレイピングにはSeleniumが有用です。Seleniumは本来ウェブアプリケーションの
【プログラミング初心者でもOK】WEB自動化ツール「iMacros」が便利すぎる！
大和正直公式ブログ 脱サラ成功を目指す副業サラリーマンの方やインターネットビジネスに挑戦している方へ大和正直の思考や経験に基づいた有益な情報を厳選してシェアしています。 「iMacros」はGoogle ChromeやFirefox、IEに対応した無料アドオンで、WEB上の操作をプログラミングによって自動操作することができる便利なツールです。 当ブログでは基本的にGoogle Chromeをベースにご紹介していくスタンスですが、今回のiMacrosは自動操作の特性上、僕が普段使っているGoogle Chromeとの競合操作を避けるためにFirefoxを使っていきたいと思います。 アドオンのダウンロード：iMacros for Firefox iMacrosで何が出来るのか？ iMacrosはブラウザ上でのWEB操作を自動化することができるツールです。 ということは、普段のパソコン操作を思い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Google Chrome】「特別なURL」でトラシューや開発、管理に便利な機能を呼び出す（一覧あり）
Safariで見ているページを Chromeで開くブックマークレット【iPhone】 - Qiita
ChromeでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法
【GoogleChrome】簡単便利!!クロムでページ全体をスクリーンショットする方法
ブラウザの操作を自動化してくれる！便利すぎるWEB自動化ツール「iMacros」に関する参考サイト＆記事まとめ
