もうじきiOS13、iPadOSが一般公開されますね。 みなさんは自身のサービスで動作確認済ませてますか？ この記事では自分が観測した要注意事象と、それに対する対処を紹介します。 ※ iOS13 beta8時点の情報です。 要注意 プライベートモード判定の裏技が使えなくなった プライベートモード判定しているサイトは要注意です！！ Apple Developer Forumsにもある内容ですが、iOS11とiOS12では下記のコードでWebSQLがエラーになる場合はプライベートモードと判定することが可能でした。 var isPrivate = false; try { window.openDatabase(null, null, null, null); } catch (_) { isPrivate = true; } しかし、Safari13ではWebSQLのサポートが終了し、プライベ

Today, I’m happy to announce a new project, RemoteDebug iOS WebKit Adapter, which enables Safari and WebViews on iOS to be debugged from tools like VS Code, Chrome DevTools and Firefox debugger.html on both Windows and Mac. RemoteDebug iOS WebKit Adapter overview PurposeThis adapter enables debugging of Safari/Webkit on iOS from Chrome Debugging Protocol (CDP) based tools. The scope of the project

Androidアプリ開発で使われるWebView そのWebViewのデバッグをPCで接続した Chromeで直接コンソールなどで確認できる 便利過ぎる拡張機能です Chrome拡張機能 ADB インストールはこちらから インストール 上記リンク先ページをChromeで開き 「CHROMEに追加」をクリックします 拡張機能を追加をクリックすれば インストール完了です レビュー PCに接続されたAndroidのアプリ内の WebViewが表示されています アプリ側にも対応が必要で WebView.setWebContentsDebuggingEnabled(true); とWebデバッグを許可する必要があります これでChromeで直接デバッグが可能で inspectで実際の画面をChromeで操作する事も 可能です アプリ固有のエラーやJavascriptエラー JavaとJavascri

API のレスポンス(JSON)を確認したいときとか、ブラウザのコンソールでオブジェクト確認してる時、出力された内容をそのままコピーして GitHub だったりどこか別の場所に貼り付けたいことがたびたびある。 で、調べてみたら開発者ツールの機能でできるらしい。 このへんに書いてあった。 http://www.fullstacktraining.com/articles/google-chrome-store-as-global-variable google chrome devtools - Copy JSON from console.log in developer tool to clipboard? - Super User 方法 コピーしたいオブジェクトの行を右クリックし、「Store as Global Variable」を選択。 成功すると *1 コンソールに temp1

経緯 もともと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 使い方 インストール

AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

2018年5月6日: Headless ChromeがStableになった後の現状に合わせた新しい記事を書きました。こちらもご参照ください。 先日PhantomJSのVitalyさんがメンテナーを引退するという話が話題になっていました。ヘッドレスなブラウザーを気軽に使う手段としてPhantomJSにはお世話になりました。今後はHeadless Chromeを使って欲しいとのことなので、試してみました。 Node.jsを使うサンプルは多く見つかりますが、諸事情でPythonを使いたかったので、ここではSelenium経由でHeadless Chromeを使います。 Headless Chromeとは Google Chrome 59から使えるようになる予定の、画面を表示せずに動作するモードです。自動テストやWebスクレイピングなどに役立ちます。 2017年4月28日現在、Mac版とLinux

Headless Chrome とは？ Headless Chrome とは、Google Chrome の ヘッドレスモードのことを指します。 ヘッドレスモードでは、実際には画面描画を行わずにWebページを読み込む等の動作を行うことができます。これの何が嬉しいのかというと思うかもしれませんが、ヘッドレスモードを用いることでCLIからWebブラウジング操作をすることができます。つまり、スクレイピングができるのです。 なぜ Headless Chrome なのか？ スクレイピングと言えば、まず Nightmare.js とか Phantom.js が思い浮かびますよね。では、なぜそれらのツールを使わず Headless Chrome を使うのか。 まずこれらは、実際に使われているブラウザではないため、特有の問題が発生する場合があるようです。また、例えば Nightmare.js は Elec

Android の Chrome で Web のフロントエンドがどういう挙動をするかデバッグする時なんかに便利。特に Javascript でスマホ限定のイベントを扱うとかね。 今回は Android の Chrome で加速度センサーの値をリアルタイムで PC 画面に出力してみる。 マニュアルは以下より。 https://developer.chrome.com/devtools/docs/remote-debugging #01. 必要なもの Chrome の入ってる Android 実機 Chrome の入ってる Mac (もちろん Windows でもドライバをインストールすればできる) エディタ (Bracketsなんかだとライブリロードが標準でついていて面白い) Terminal (ローカルサーバーを立てるため) #02. Android の準備 設定 > 開発者向けオプション

以前こんな話もあったけど…… Chromeの拡張がamazonアフィリエイトを書き換えていた件と、その顛末 - NAVER まとめGoogle Chromeの拡張機能を介してマルウェアを配布する業者が増加中 - GIGAZINEいつの間にかアドウェアやマルウェアになっているChrome拡張機能にご注意！ : ライフハッカー［日本版］Warning: Your Browser Extensions Are Spying On You - How-To Geek Discussion今回はそれとは別、Flare0n という作者のChrome拡張機能について。以下の拡張機能を使ってる人は注意。 2ch Reader Plus【軽量】YouTube ダウンロード・自動画質設定ニコニコ動画 盛り上がりチェッカー【ニコニコ動画で自動再生+α】NicoNico Autoplay PlusPixiv Pl