Uncaught TypeError と Unchecked runtime.lastError の回避方法
はじめに 個人開発を進める中で詰まったエラーと解決方法をメモとして残します。 エラー内容 個人開発でブログアプリを作成していたところ、テキスト入力欄にテキストを入力したり、入力したテキストを選択するたびに、次のようなエラーが発生していました。 content.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'target') at content.js:8:344346 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received 解決策 他の人の環境や
【Chrome】httpサイトがhttpsへリダイレクトされてしまう!? | k-design株式会社
ホームページ制作 打ち合わせからデザイン・サイト構築、保守・運用まで丸ごと自社で行なっています。また制作に必要な文章作成や写真撮影も弊社スタッフにお任せください。 詳細もみる デザイン・印刷物の制作 パンフレット・会社案内・チラシ・ポスター、名刺、ショップカードなど大きなモノから小さなモノまで各種印刷物のデザイン制作が可能です。イラストや販促物、PR ツール一式など企画立案からデザインまでトータルプロデュースいたします。 詳細もみる
Montereyと(After)Shokzの相性問題とその解決方法 | おそらくはそれさえも平凡な日々
macOSをMontereyにあげてからShokzの骨伝導ヘッドフォンが不調になる、具体的にはミーティング中に突然ミュートになるという問題がある。ボヤキや暫定解決方法含めてTwitter上に書き散らしていたが、困っている人が相変わらずいるようなのでまとめておく。と言っても、以下のredditに書かれている内容そのままです。 https://www.reddit.com/r/Zoom/comments/qhmpkg/aftershokz_aeropex_on_zoom_and_macos_monterey/ 自動音量調整が効いている場合それが悪さをする サウンド環境設定を開いて観察するとよく分かる マイク音量がどんどん下がっていってミュートされてしまう 音量自動調整を無効にすれば暫定解決 会議ツールの設定でそれができればOK (zoom等) 設定できない場合もChromeであれば以下の拡張を
GitHub の Markdown (GFM) でPlantUMLを表示するChrome拡張 | DevelopersIO
よく訓練されたアップル信者、都元です。大変ご無沙汰しておりますが、相変わらず生魚が好きです。 さて最近は、GitHub上でもろもろとソフトウェア開発をしていることが多いのですが、gitで管理するmdファイルはもちろん、issueやPR内でもMarkdown記法を使って様々な記述できるのはご存知の通りかと思います。 PlantUML さて、仕様のディスカッションやドキュメントの記述をしていると、ちょっとしたシーケンス図やクラス図、状態遷移図、UMLという図の記法を使ってコミュニケーションを取りたい場面が出てきます。 以前、当ブログでも「Atom と PlantUML で快適シーケンス図駆動開発ライフ」というエントリーにて、テキストの文法でUMLを記述して画像生成、それをGitHubに貼り付ける、というテクニックをご紹介しました。 PlantUMLは非常に強力な仕組みです。Atomによる編集も
ruby/debugのChrome Devtools連携をRailsで動かす｜TechRacho by BPS株式会社
morimorihogeです。涼しくなってようやく生きていける感じになって何よりです。 今回はruby/debugに新しく導入されたChrome Devtools連携リモートデバッグ機能を動かしてみたので、そちらを紹介してみようと思います。 ことの起こり 新しいRuby標準デバッガとして開発が進んでいるruby/debugですが、先日こんなTweetがありました。 debug.gem and Chrome browser integration. Thanks Ono-san! pic.twitter.com/3aUdH2zbEo — _ko1 (@_ko1) October 14, 2021 なにこれすごくない！？と思い、今回の記事を書くに至りました。 動きとしては、デバッガのコンソールで open chrome コマンドを実行するとURLが表示され、そのURLにChromeでアクセスす
Python: Selenium + Headless Chrome で Web ページ全体のスクリーンショットを撮る - CUBE SUGAR CONTAINER
スクレイピングした Web サイトからページ全体のスクリーンショットを撮影したい機会があった。 そこで Selenium の Python バインディングと Headless Chrome を使ったところ実現できたのでメモしておく。 ちなみに、ページ全体でなければ Headless Chrome 単体でも撮れる。 その方法についても末尾に補足として記載しておいた。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ python -V Python 3.6.5 $ pip list --format=columns | grep -i selenium selenium 3.13.0 $ chromedriver --version ChromeDriver 2.
Rubyのスクレイピング環境を簡単にモダンに作る(2018年度版) - Qiita
Dockerベースで手軽に便利なスクレイピング環境を構築する手順をまとめました。 Selenium on DockerやGKEのサンプルとしてもどうぞ。 GitHub : https://github.com/nullnull/scraping_sample この記事でできるようになること 本番環境(GKE)でスクレイピングのスクリプトを定期実行 スクレイピングを実行中のSelenium(Chromeブラウザ)の様子をVNCで監視(本番/開発) スクレイピング結果をSlack通知(本番/開発) スクレイピング結果をRedashでビジュアライズ(本番) 環境構築にかかるコマンドは数回だけで、スクリーンショットのように動作を確認しながら開発を行うことができます。（左がVNCを通したChromeブラウザ、右がRedash） この記事で説明しないこと スクレイピングのコードそのものの説明 そもそも
えっ、まだ人力でやってるの？ Webアプリのテスト自動化で使われる「Selenium」とは | 株式会社キャパ
Webアプリの画面テストに用いられるSeleniumというツールをご存知ですか。Seleniumはブラウザ上のテスト自動化が可能なツール群のこと。人力作業の反復テストは、実は自動化できるかも。テスト自動化ツールSeleniumを解説します。 社内のブラウザテストはSeleniumで自動化できる 政府主導による『働き方改革』が推し進められるなか、残業時間の削減など、本格的に業務生産性の向上に取り組む企業が増えてきています。業務を効率化するには「無駄なことはしない」「可能な業務は自動化（仕組み化）する」というのがポイント。では、普段の業務を自動化させてくれるツールには、どのようなものがあるでしょうか。 反復作業を自動化させてくれるツールのひとつにSeleniumがあります。Seleniumは導入することで、Webアプリケーションの画面テスト自動化を実現可能。「定期的に行なう画面テストを自動化さ
Web UIテスト自動化の実行環境をSelenium Gridで - ZOZO TECH BLOG
どうも品質管理部エンジニアチームの木村です。 最近の話ではないんですがWeb UIテスト自動化をしようとなった時の事を書きます。 まずは初期段階の実行環境についてです、自動テストスクリプトの構築や処理そのものはまた次回。 Seleniumでテストを自動化したい！ ZOZOTOWN に限らず最近のサービスはなんでもリリース頻度が高いです。 そして何故なのか、いついかなる時も、開発スケジュールは押し気味になります。 これは業界七不思議の1つです。たぶん。 品質管理部としてのテストは開発スケジュールの一番最後に置かれます。 つまり…短期決戦必須となります…。 そんなよくある話からSeleniumを使ってWeb UIテストを自動にしたいという流れになりました。 リリース頻度が高ければ高いほど、リグレッションテストはおろそかになると思うので、そこを自動テストで改善できると素敵です。 じゃあ自動テスト
Webの自動テストのこの１年を振り返って | メルカリエンジニアリング
Mercari Advent Calendar 2019も、この記事を入れてあと３個となりました。最後まで読んでくださいね。 23日目はAutomation&QAグループで、Webのテスト自動化を行っている@AHA_oretamaがお送りします。 今回はWebの自動テストについて、この１年やってきたことを振り返ってみようかと思います。 Webのリアーキテクチャ 現在、Webではリアーキテクチャを進めています。 進め方としては既存のモノリシックなWebアプリケーションを残したまま、パス（例えばトップ /jp/ や検索ページ /jp/search/ ）ごとに新しいWebアプリケーションにマイグレーションする方法をとっています。 影響範囲を小さくしつつその範囲の中でチャレンジが行えることがこの方法の利点です。 詳しくは去年のMercari Tech Confの資料をご覧ください。 speaker
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ファミリーだけではなく、最近のテストツールトレンド傾向を調査し
10分で理解する Selenium - Qiita
Seleniumとは Selenium は Web ブラウザの操作を自動化するためのフレームワークです。 2004 年に ThoughtWorks 社によって Web アプリケーションの UI テストを自動化する目的で開発されました。 https://selenium.dev/history/ 元々は Web アプリケーションの UI テストや JavaScript のテストの目的で開発されましたが、テスト以外にもタスクの自動化や Web サイトのクローリングなど様々な用途で利用されています。 この記事では Python で Selenium を介して Chrome を操作するための環境構築と基本的な使い方について説明します。 TL;DR 公式の Docker イメージ (https://github.com/SeleniumHQ/docker-selenium) を使うと環境構築が超簡単
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
ModHeader - Modify HTTP headers - Chrome Web Store
Created by the owner of the listed website. The publisher has a good record with no history of violations. Learn more. Modify HTTP request headers, response headers, and redirect URLs The most popular Chrome extension to modify headers and monitor page statistics simultaneously. ** What can ModHeader do?** - Add, modify, and remove request and response headers - Use ModHeader to set X-Forwarded-Fo
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともと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 使い方 インストール
Chromeデベロッパーツールで圧縮(minified)されたJavaScriptを読みやすく表示する - Qiita
以下の内容は、Googleの開発者向けページにある 読みやすい形式への JavaScript の変換 ほぼそのままです。 (引用) JavaScript を読みやすい形式に変換するには、Chrome DevTools で [Pretty-Print] アイコンをクリックします。 実際にやってみます。 たとえばGoogle Earthの app_ja.js のソースコードは圧縮されているので次のように表示されますが、これだと読める気がしませんね。 そんなときには、 Pretty Print {} のアイコンをクリックします。 すると、 app_ja.js:formatted というタブの中に、読みやすく整形されたスクリプトが表示されます。 ちなみに、デバッグ時のブレイクポイントはformatted側に設定すれば良いので、既定のAPIを使うような開発作業も楽になりますね。
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
最速で データを売上に転換 ヒートマップ分析、アクセス解析、ページ編集、 A/Bテスト、WEB接客、パーソナライゼーションまで 1行のタグを設置すれば、ノーコードですべて実現。
【拡張機能は不要】Google Chromeでwebページ全体のスクリーンショットを撮る方法 | Webエンジニアのブログ
webページの画像を誰かに共有したり、仕事の資料などでスクリーンショットが必要になることはあるでしょう。今まではスクリーンショットを撮る場合、とくにwebページ全体の時はGoogle ChromeはもちろんFirefoxやSafariでも、拡張機能を使う方法をとっていたかと思います。 しかし、Google Chromeのバージョン59の正式版がリリースされ、拡張機能を入れなくてもGoogle Chromeでwebページ全体のスクリーンショットを撮ることができるようになりました。 Google Chromeのデベロッパーツールを使うやり方なのですが、これを使うことによってPCはもちろんタブレット、スマホなど、いろんなデバイスの表示でwebページ全体のスクリーンショットを撮ることができるのです。 これは素晴らしい。 ということで、Google Chromeでのwebページ全体のスクリーンショッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
masshiro.blog
