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でアクセスす
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 バグやブラウザの不整合
「HSTSが使用されているため、現在アクセスできません」の対処方法｜おおいし (bicstone)
「Chromeでこの接続ではプライバシーが保護されません。HSTSが使用されているため、現在アクセスできません」と表示されてアクセス出来ないときの対処方法を紹介します。 何が起きているのか暗号化通信(HTTPS)を「絶対に行う」ように指定されたサイトなのにも関わらず、暗号化通信が出来なかったときに発生します。 この接続ではプライバシーが保護されません bicstone.me では、悪意のあるユーザーによって、パスワード、メッセージ、クレジットカードなどの情報が盗まれる可能性があります。 bicstone.me では通常、暗号化して情報を保護しています。 今回、Chrome から bicstone.me への接続試行時に、このウェブサイトからいつもとは異なる誤った認証情報が返されました。悪意のあるユーザーが bicstone.me になりすまそうとしているか、Wi-Fi ログイン画面で接続が
Chromeデベロッパーツールで圧縮(minified)されたJavaScriptを読みやすく表示する - Qiita
以下の内容は、Googleの開発者向けページにある 読みやすい形式への JavaScript の変換 ほぼそのままです。 (引用) JavaScript を読みやすい形式に変換するには、Chrome DevTools で [Pretty-Print] アイコンをクリックします。 実際にやってみます。 たとえばGoogle Earthの app_ja.js のソースコードは圧縮されているので次のように表示されますが、これだと読める気がしませんね。 そんなときには、 Pretty Print {} のアイコンをクリックします。 すると、 app_ja.js:formatted というタブの中に、読みやすく整形されたスクリプトが表示されます。 ちなみに、デバッグ時のブレイクポイントはformatted側に設定すれば良いので、既定のAPIを使うような開発作業も楽になりますね。 Register a
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
【拡張機能は不要】Google Chromeでwebページ全体のスクリーンショットを撮る方法 | Free Style
webページの画像を誰かに共有したり、仕事の資料などでスクリーンショットが必要になることはあるでしょう。今まではスクリーンショットを撮る場合、とくにwebページ全体の時はGoogle ChromeはもちろんFirefoxやSafariでも、拡張機能を使う方法をとっていたかと思います。 しかし、Google Chromeのバージョン59の正式版がリリースされ、拡張機能を入れなくてもGoogle Chromeでwebページ全体のスクリーンショットを撮ることができるようになりました。 Google Chromeのデベロッパーツールを使うやり方なのですが、これを使うことによってPCはもちろんタブレット、スマホなど、いろんなデバイスの表示でwebページ全体のスクリーンショットを撮ることができるのです。 これは素晴らしい。 ということで、Google Chromeでのwebページ全体のスクリーンショッ
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Overview of Puppeteer | Chrome for Developers
Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium. The Chrome DevTools team maintains the library, but we'd love your help and expertise on the project. See Contributing. What can I do? Most actions you can take manually in the browser can be done wit
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
Dockerで日本語対応のHeadless Chrome + puppeteerを立ち上げ
docker-composeで日本語対応のHeadless Chromeを「puppeteer」で操作する手順です。 🐡 Dockerfile日本語対応のChromeの入ったDockerfileは次のように記述します。 FROM ubuntu:latest MAINTAINER morizyun <@zyunnosuke> # For Japan RUN sed -i -E "s@http://(archive|security)\.ubuntu\.com/ubuntu/@http://ftp.jaist.ac.jp/pub/Linux/ubuntu/@g" /etc/apt/sources.list # Basic RUN apt-get update \ && apt-get install -y sudo curl wget zip unzip git nodejs npm fon
ChromeデベロッパーツールでWebページのスクリーンショットをとる。拡張機能なしでね - Qiita
拡張機能でWebページのスクリーンショットをとると 今まではChromeの拡張機能を使ってWebページのスクリーンショットをとっていたのですが、ウィンドウ内を全てまるっとキャプチャーされたり、使い勝手が悪かったりと悩みの種でした。そんな中で見つけたデベロッパーツールのキャプチャー機能が個人的にしっくりきたので紹介します。 しっくりきたポイント 拡張機能をインストールしないでいい ウィンドウサイズを細かく設定できる おしいポイント キャプチャーが1クリックでとれない WebページのスクリーンショットをとるCapture screenshot スクリーンショットをとりたいWebページを開いてデベロッパーツールを起動します。 Webページのウィンドウサイズを細かく設定できるようにデバイスツールバーを表示します。デバイスツールバーはデベロッパーツール左上のアイコンをクリックすると表示されます。 Q
GitHubで差分を見る時にPlantUMLを描画させる - Qiita
PlantUMLでいろんな図を書いているのですが、GitHubのPullRequestで差分として表示されるPlantUMLはただのテキストにしか見えないのでレビューし辛いです。 差分見る画面 いちいちブランチを手元に持ってきて、エディタで開いて図にしなければなりません。 なんか良い方法はないかと思い探してみたら、Chrome拡張がありました。 PlantUML Viewer 入れるだけです。 PullRequestの画面からファイルの画面まで行って、直接テキストで見るボタンを押す 拡張入れる前 入れた後 図だ！！ らくちんだ 適当なファイルを僕のGitHubに置いてあるので、適当に試しに見てみるのにでも使ってみてください。 クラス シーケンス ステート Register as a new user and use Qiita more conveniently You get artic
Chromeの開発用ショートカット(Mac編) - ミッションたぶんPossible
いちいち何度もド忘れして調べるのがメンドクサイので。まぁツール欄から確認できはするんだけど。 JavaScriptコンソール：Command + Option + J デベロッパーツール：Command + Option + I ソースコードを表示：Command + Option + U デベロッパーツールでJavaScriptコンソールを開いている場合、「J」と「I」の挙動の違いは無いです。
Google Chromeで https しか開けなくなった場合の対処方法 - 風柳メモ
特定ドメインが https でしか開けなくなった http→httpsの移行途中のドメインで、Google Chromeではいつの間にかhttp://〜/を開こうとしてもhttps://〜/にリダイレクトされてしまうようになっていた。 対処方法：対象ドメインを HSTS セットから削除する 当該ドメインが HSTS(HTTP Strict Transport Security) セットに登録されてしまっていたのが原因。 Google Chromeで、 chrome://net-internals/#hsts にアクセスし、「Delete domain」で対象ドメインを指定して[Delete]をクリックして、セットから削除することで対処。
ChromeでREST APIをテストするならコレ！「DHC」 | mah365
「え、Chrome使ってるのにDHC知らんの？」と言われて「え、化粧品の話ですか？？？」と壮大なボケをかましたのですが、REST APIをテストするためのChromeアプリでした。 こんな便利なツールを知らなかったとは・・・って感じ こちらのリンクからDHCをインストールすると、Chromeのアプリ一覧にDHCが並ぶようになります。そこからDHCを開くと、↑の画像のような感じの画面が表示されます。 使い方は画面を見れば分かるほど分かりやすいですね。リクエストは名前をつけて保存することができるので、「あのAPI、どんな値が返って来たっけ？」というときでも安心です。 POSTリクエストの場合は↑の画像のような感じでリクエストボディの値を書くことができます。 Formモードにすると、かなり直感的な形でリクエストボディの値を指定することができます。凄いぜ。。 ブラウザベースなので、セッションを保持
Chrome で Cookie を削除、許可、管理する - パソコン - Google Chrome ヘルプ
Chrome では Cookie に関して、既存の Cookie を削除したり、すべての Cookie を許可またはブロックしたり、特定のウェブサイトに対する設定を行ったりすることができます。 重要: トラッキング防止機能のテストグループに参加している場合は、サードパーティ Cookie を管理するための Chrome の新しい設定である「トラッキング防止機能」が表示されます。トラッキング防止機能について Cookie とは Cookie は、アクセスしたサイトによって作成されるファイルです。あなたのサイト訪問についての情報が保存されるため、オンラインのユーザー エクスペリエンスが向上します。たとえばサイトがユーザーのログイン状態を維持したり、ユーザーのサイトの利用設定を記憶したり、ユーザーの地域に関連する情報を提供したりすることができます。 Cookie には次の 2 種類があります。
WebAPIの動作確認にはAdvanced REST clientが便利そう - なか日記
WebAPIの動作確認する際、GETはまだしもPUTやPOST、DELETEはどうやって確認するのが楽なんかなぁと。 仕方ないので簡単なフォームを作成して動作確認していたのですが、「.NET開発テクノロジ入門 2014年版 VisualStudio2013対応版 (MSDNプログラミングシリーズ)」にいいツールがさりげなく紹介されていました。 Chrome ウェブストア - Advanced REST client Chrome拡張ですが、自分はChromeをメインで使用しているので問題なし。 こんな風にPOSTするデータを指定したり 結果を見やすい形で表示してくれりします。 実行するパラメータは画面右上の「Save」からローカルやGoogleDriveに保存ができます。*1 *1:ちなみに、私の環境ではGoogleDriveに保存するといつまでも応答がなく、保存できないという現象が発生し
📝 Markdown エディタなら『StackEdit』がおすすめ！ - mattintosh note
Markdown エディタなら Mac/Linux/Windows で使える Chrome アプリの『StackEdit』がおすすめ！ 『StackEdit』を試してみたらとても良かったのでレビューです。 Chrome アプリだから Mac/Linux/Windows で使える！ 初回起動時の画面。この時点で「この子はデキる子に違いない！」感が漂ってきます…。OS が変わっても操作方法は同じで見栄えもほとんど変わりません。 OS X OS X 10.9 Linux Linux Mint 17 Windows Windows 7 ＊上記画像はディスプレイサイズがそれぞれ異なります 分割ビューの縦横切り替えやキーボード・ショートカット設定など機能が豊富！ 分割ビューの縦横切替やテンプレート設定など機能も豊富です。テーマもいくつか切り替え可能で黒背景も用意されています。エディタ側のフォントはリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools
HTMLエラーチェッカー
