mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
Linguixはドキュメントの管理やショートカットによる定型文挿入が可能なChromeエクステンションです。 導入する事でtextarea内に書いた文章をドキュメントとして保存したり、予め設定した定型文を任意のショートカットで挿入出来るようになります。 ショートカットは任意のキーワードをタイプしてからshift+ctrl+spaceすれば置換できます。仮に忘れてしまった場合でもtextareaの右下部にアイコンが表示されているのでそこから設定したショートカットを探せるようにもなっています。 Webで文章を書いたり連絡する事が多い方にはいいツールじゃないかなと思います。利用にはユーザー登録が必要になりますが、GoogleやFacebookのアカウントで登録可能です。 Linguix
API開発や利用を行うとき、ブラウザでJSONを取得することがあります。 APIドキュメントによってはJSON構造と型のみが書かれている場合もあり、「実際にどんな値が入っているの?」を確認したい場合などです。 しかし、次のように文字列が単純表示されているとかなり見にくいです。 これは気象情報を取得するOpenWeatherMapのAPIを叩いた際のレスポンスです。 分かりやすく見ようと思うと、何らかのJSON FormatterでPretty表示することが多いです。 この作業(JS0Nコピー&JSON Fomatterに貼り付け&Pretty表示)が地味に手間です。そこでChrome拡張機能で楽しちゃいましょう!!! JSON Viewer 下記の拡張機能をインストーするだけです! JSON Viewer - Chrome ウェブストア JSONが構造化されて表示される 実際に冒頭のJSO
ほかにも右枠に英語字幕が表示されますので、動画中の字幕が一瞬で消えてしまったとしても、前後のセンテンス含めて追えますよ。 単語の意味の確認はマウスカーソルをあてるだけScreenshot: 山田洋路 via LLY知らない単語が出てきたときには、英語字幕にマウスオーバーすると辞書がポップアップ。動画中/右枠どちらの字幕からも単語辞書は確認できて、マウスオーバーの際に一時停止するよう設定できます。 同じように、いったん止めて意味を確認したいときや、今のフレーズをもう一度再生して聞き直したいときには、スペースキーや方向キーを押すだけで操作可能です。 目的に合わせて字幕のオン/オフを切り替えScreenshot: 山田洋路 via LLY英語字幕を見つつ、わからないところが出てきたら日本語字幕に頼る…というような使い方が想定されますが、つい日本語字幕を見てしまうのなら設定から非表示に。 リスニン
2020/2/18追記 サポートに問い合わせたところ、ALBの不具合はロールバック済みで、cookie名を縮める対応は不要、とのことでした。試してみたところ、たしかにcookie名の指定をやめても問題なく認証できました。 AWSのApplication Load Balancerの認証機能を使って、スタッフからのアクセスのみ許可する社内向けウェブサービスを運用しているのだけど、昨日くらいからGoogle Chromeで認証が通らなないという声を聞くようになった。 現象としてはリダイレクトループが発生していて、コンソールを見るとSet-Cookie headerが長すぎるというエラーが出ていた。 Set-Cookie header is ignored in response from url: https://****/oauth2/idpresponse?code=e51b4cf0-8b
はじめに Python + Selenium + Chrome で、要素の取得、クリックなどの UI系の操作、待機、ページ全体のスクリーンショットなど、一通り試してみます。 PhantomJS はもう更新されないということなので、ブラウザは Chrome にします。 この記事には、Selenium の API に関する情報と Chrome に特化した情報がありますが、前者の Selenium の使い方に関する情報は Firefox など別のブラウザでも使えます。 注意事項 ウェブの自動テストやスクレイピングで使われる技術です。特にスクレイピングでは、著作権の問題や、サーバー側の負荷、各種規約(会員としてログインする場合の会員規約等)やマナーなどを考慮する必要があります。 たとえば、Twitter など利用規約で明示的にスクレイピングが禁止されていることや、robot.txt などでクローリ
「24コアもあるCPUを積んでいるハイエンドPCであるにもかかわらずGmailを使っている際にChromeがフリーズしてしまった」という現象に遭遇したブルース・ドーソンさんが、その原因を発見するまでの取り組みをブログに書き残しています。なお、ドーソンさんはGoogleでChromeを開発しているエキスパート開発者です。 24-core CPU and I can’t type an email (part one) | Random ASCII https://randomascii.wordpress.com/2018/08/16/24-core-cpu-and-i-cant-type-an-email-part-one/ ある日の朝、ドーソンさんは極めて日常的な「メールを書く」という作業をGmailで行っていたところ、入力した文字が遅れて表示されるなどの怪しい挙動を見せた後、突然Gma
拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバイルサイトでページ全体のキャプチャが必要なこともありますよね。 そんな時には、Chromeに標準で搭載されている機能を使えば、拡張機能を使わずに、ページ全体のスクリーンショットを撮ることが可能です。 PCサイトでページ全体のスクリーンショットを撮る方法 PCサイトでページ全体のスクリーンショットを撮る方法についてです。 次の手順で行ってください。 デベロッパーツールを立ち上げる 詳細機能を呼び出す 「capture」もしくは「full」と入力し、「Capture full size screenshot」を選択 ページ全体のスクリーンショットがダウンロードされる 1. デベ
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります(参考記事「JavaScriptでモジュールを使う時代に! ブラウザで覚えるES Modules入門」)。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます(tc39/proposal-dynamic-import)。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav
vimiumとは vimキーバインドでGoogle Chromeやfirefoxを使えるようにできるプラグインです カスタムすれば、マウス操作なしでウェブブラウジングする事が可能です! vimiumができること jとkで上下スクロール fやiでリンクを表示して遷移する できる事一覧(基本) ? 使い方を説明してくれる h 左へスクロール j 下へスクロール k 上へスクロール l 右へスクロール gg 一番上へスクロール G 一眼下へスクロール d 半ページ下へスクロール u 半ページ上へスクロール f 現在のタブでリンクを開く F 新しいタブでリンクを開く r 更新 gs view sourceを表示 yy URLをコピーする yf リンク作のURLをコピーする ...その他いろいろ カスタムするとさらに便利に!! l右スクロールとh左スクロールはいらないので、戻ると進むに書き換える -
Web制作をしていると、ちょっとした英語の文章を日本語に訳したい、または日本語の文章を英語にしたいということがあります。 そういったとき、[Google翻訳のページを開く>文章をペーストして翻訳ボタンを押す]よりも、ChromeのアドレスバーからGoogle翻訳できると少し便利です。 以下の方法は、Chrome for Mac/Windowsで使用できます。Android/iOSでは使用できないようです。 設定方法 Chromeの環境設定を開き、右上の検索ボックスに[検索]と入力します。 [検索エンジンの管理…]をクリックします。 [その他の検索エンジン]の1番下の箇所に以下のように入力します。 [検索エンジンを追加]に[Google翻訳] [キーワード]に[tr] [URL]に[http://translate.google.co.jp/?source=osdd#auto|auto|%s
[フロントエンド] 表示中のWebサイトで、使われている技術要素をサクッと確認するChromeプラグインが面白い こんにちは、@yoheiMuneです。 最近仕事を一緒にしている方から教えてもらったのですが、Chromeのプラグインで表示しているサイトで使われている技術要素をピックアップしてくれる便利ツールがあったので、それを紹介したいと思います。意外と面白かった。 https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg 目次 Wappalyzerで技術要素を調べる Chromeウェブストアで公開されているWappalyzerをインストールすると、以下のように表示しているサイトの技術要素をみることができます。簡単で便利です。 クライアント側はなんやかんやでわかるかもしれません
つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く