【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去する - Qiita
前、Chromeを使うなら、必ずServiceWorkersを無効化しようという記事を書いたのですが、あの方法はてんで全然ダメダメでした。 chrome://serviceworker-internalsには無用なServiceWorkerが増え続け、chrome://flags/からはServiceWorkerの削除設定が削除されました。 そんなわけで、今度こそServiceWorkerを決定的かつ完全に消し去りたいと思います。 といっても自力でどうこうしたわけではなく、全面的に他人の力を借りただけですが。 Reject Service Worker Reject Service Workerをインストールする。 おわり。 かんたん！ 作者はtoshiさんです。 ありがとうございます。 アドオンの技術的内容はServiceWorkerを無効化するという記事に書かれているのですが、Serv
Chrome Extension を円滑に作るためのポイント
Chrome Extension を作った際にいくつかハマったことがあったのでメモします。 ページ上での JavaScript 実行結果を取得する scripting.executeScript を使うのですが、関数を指定する形式のみしか値が返ってきません。ファイルを指定する形式と同じページに書かれており、制限が明確に書かれていないため紛らわしいので注意が必要です。 NG 次は実行結果が null として返ってきます。 function getTitle() { return document.title; } // returns null getTitle(); // same result // (() => getTitle())(); async function walkDocumentTitle() { const tabId = getTabId(); const inje
Chrome85でWebサイトの流入元がとれない問題と対応方法 - paiza times
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Dockerコンテナ内でpuppeteerを使うとChromeゾンビプロセスがたまる問題 - その手の平は尻もつかめるさ
表題のような問題があり，その調査したという記録です．なお，結論を一言で言うと--initを使え，ということになります． そもそもDockerコンテナを起動すると，CMDあるいはENTRYPOINTに指定されたコマンドがコンテナ内でPID 1として起動します．これが何を意味するかと言うと，「CMDあるいはENTRYPOINTに指定されたコマンド」はそのコマンド自体の責務をまっとうするのと同時に，initプロセスとしての振る舞いも行わなければならないということになります (id:hayajo_77さんにこの辺を詳しく教えてもらいました，ありがとうございます)． つまりPID 1で動いているプロセスは「SIGCHLDをトラップすることで孤児プロセスを適切に回収し，waitpidをかける」という処理も適切に行う必要があります． さて，puppeteerを使ってChromeブラウザを起動するとどうな
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
Node.jsのアプリケーションデバッグ・改善方法をおさらいする - hiroppy's site
ステップ実行 --debugと--debug-brkは Node8 の時点ですでに非推奨なので、使わないでください。 デバッグ方法 コンソール Chrome devtools または、VSCode のような IDE に任せる 今回は、エディタ依存の話は特にしないです。 共通的な手順 基本的には、debugger を止めたい場所に置いていくことになります。 例として、以下のコードで説明していきます。 "use strict"; const { readFile } = require("fs"); const { promisify } = require("util"); const readFileAsync = promisify(readFile); (async () => { const data = await readFileAsync("hello.txt", "utf8"
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
アプリとウェブ間の遷移をスムーズにする Chrome カスタム タブ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
位置情報を偽装して、その場所にいなくてもその場所のモバイル検索結果をPCのChromeで調べる方法
[レベル: 中〜上級] この記事では、Google Chromeを使って位置情報をエミュレートする方法、言い換えれば任意の場所に設定する方法を解説します。 位置情報を偽装することで、実際にその場所にいなくてもその場所で検索したときの（モバイル）検索結果を調べることが可能になります。 Google Chromeで位置情報をエミュレートする手順 まず次のいずれかの操作で、デベロッパーツールを起動します。 [Google Chromeの設定]（右上の3本バー） − [その他のツール] − [デベロッパー ツール] Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) 標準では、ウィンドウの右にデベロッパーツールが出現します。 ツールを下に移動します。 その方が見やすいからです。 ウィンドウっぽい四角のアイコンをクリックします。 ツールが下に移動します。
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
WEB屋にありがちな発狂寸前のイラつきを軽減するツールと参考にしたサイト色々 | バンクーバーのうぇぶ屋
ブログを書く時、メールを書く時、情報収集する時、ちょっとしたことが手間になってイライラすることって多くないですか？ 僕はとにかく日々のルーティンワークは効率よく済ませたいと思っているので、そういうイラつきを感じたらできるだけ早く解消するように心がけています。 そこで、今日は僕が「あぁ、めっちゃイライラする！」って感じた時、どういうツールやサービスを使って軽減しているのかをご紹介させて頂こうかなと思います。僕の場合はMacbook proまたはデスクトップのWindows7、ブラウザはChrome、メーラーはThunderbirdという環境なので、その環境に偏った紹介になってしまうかもしれませんが、ご了承ください！ もう、既知の物だからとか、知らないだろうとか何も考えていません。イライラ解消できた！と思った物は全部掲載させて頂きます。 それでは、この記事から多少なりとも日々の業務の手助けにな
Google ChromeをRAMディスクに丸ごとインストールして超高速化する方法！ | フリーソフトラボ.com
前回のエントリーで、FirefoxをRAMディスクに完全インストールして信じられないほど高速化する方法を紹介しましたが、同様にGoogle Chromeも、キャッシュの保存場所をRAMディスクに置き換えるだけでなく、RAMディスクに丸ごとインストールしてしまえば、より高速化することが可能です。しかしながら、Chromeの場合はインストール時にフォルダの指定ができないため、普通はOSがセットアップされているHDDにしかインストールすることができません。 そこで、ここでは”ジャンクション”と呼ばれる手法を用いて「表向きはあたかもHDDにアクセスしているように見えるが、実際にはRAMディスクドライブにアクセスしている」という状態を作りすことで、Google Chromeの起動に必要なデータを丸ごとRAMディスクから呼び出し爆速動作させるという、裏技的な方法を紹介します。 なお、この記事ではあらか
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
Google Chromeのabout:memoryがすごい件について - Blog::koyhoge::Tech
Twitterでちょっとつぶやいてみたけど誰からも反応がなくて悔しかったのでブログに書く。後悔はしていない。 Google Chrome を使っていて、「ウィンドウ」メニューの中に「タスクマネージャ」という項目があるのに遅ればせながら気がつきました。3周くらい遅れてますかそうですかまあいいです。 それでおもむろに「タスクマネージャ」メニューを選ぶとこんなウィンドウが開きます。 各タブや拡張機能ごとのCPUとメモリの使用量が一覧できます。これは便利。 そして気になるのが、左下の「統計情報」リンクです。 ここは about:memory へのリンクとなっており、クリックすると以下の表示になります。 最上行にGoogle Chromeのメモリ使用量が出ているのはいいとして、その下に同一マシンで動作している他ブラウザのメモリ使用量も表示されています。オーグレイト！ なんというおせっかい機能もしくは
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me