無料でJavaScriptによるトラッキングを防げるマルウェア対策拡張機能「JShelter」をフリーソフトウェア財団が発表
フリーソフトウェア財団が2021年9月30日に、トラッキングやデータ収集などJavaScriptを悪用したマルウェアによるリスクを軽減するブラウザ拡張機能「JShelter」を発表しました。 JShelter: Home https://jshelter.org/ FSF announces JShelter browser add-on to combat threats from nonfree JavaScript — Free Software Foundation — Working together for free software https://www.fsf.org/news/fsf-announces-jshelter-browser-add-on-to-combat-threats-from-nonfree-javascript JavaScriptを使えば、ブラウ
Chrome・Firefox・Edgeでユーザースクリプトを動かすことができクラウドで同期もできる拡張機能「Violentmonkey」を使ってみた
各ユーザーが公開する便利な機能をブラウザに導入できる仕組みが「ユーザースクリプト」です。「Violentmonkey」はユーザースクリプトをChrome、Firefox、Edgeの各ブラウザに導入し、クラウド同期まで可能な拡張機能とのことなので、実際に使ってみました。 Violentmonkey https://violentmonkey.github.io/ まずはViolentmonkeyをブラウザにインストールするところから。公式サイトの「GET STARTED」をクリック。 遷移先の「Stable Release」に各ブラウザ向けのリンク一覧があります。今回はChrome版のViolentmonkeyを使うため、「Chrome Web Store」をクリック。 Chromeに追加をクリック。 ポップアップが表示されるので、「拡張機能を追加」をクリック。これでインストールが完了です。
VS Codeの中でJavaScript/Node.jsのデバッグまでする（ひとり DevTools Advent Calendar 2020 – 21日目） | Ginpen.com
21 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。 VS Code なら Chrome DevTools （の機能）と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。 先にまとめ サーバー側もクライアント側も VS Code からデバッグできる ブレイクポイントの設置 変数の閲覧 ログ出力 Run パネルからデバッグ設定を作成、デバッグ実行 Next.js などビルドを行うものも、ファイル出力できれば デモプロジェクト よければこちらご利用ください。JavaScript と No
Coverageで使ってないコードを検出（ひとり DevTools Advent Calendar 2020 – 18日目） | Ginpen.com
18 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 たくさんコードを書いて書き足して消して書き直して消して書き換えてって繰り返してると「あれこれまだどこかで使ってるっけ？」みたいになることがあります。近年は VS Code が灰色で表示してくれたり ESLint で検出 できたりもできるけど、でも別ファイルからも使えるようなやつだとそういうのも厳しい感じです。 あと CSS の使われていないスタイルも。 DevTools にはそういうものを検出する機能があります。 先にまとめ Coverage パネルを使って未使用箇所や割合を計測 まともにやるならツールを 未使用コードを検出 DevTools の右上 “…” → More tools → Coverage 指示に従い reload ボタンを押す 画面は再読み込みされる 必要に応じて
)
LogBox - 開発者ツールを開かずにエラーを補足する
Webサイトを訪問していて何かJavaScriptのエラーなどが起こった際、開発者ツールを立ち上げる必要があります。逆にいえば、開発者ツールを開いていないとエラーに気付かない可能性もあります。これは開発者にとっては面倒な一手間です。 今回紹介するLogBoxは開発者ツールを開かずにエラーを報告してくれるGoogle Chrome機能拡張です。 LogBoxの使い方 例えばMOONGIFTを見た場合。Twitterのいいね数を表示するウィジェットがエラーになっていました…。 LogBoxを使えば、開発者ツールを立ち上げる前に、とりあえずエラーが出ているのかどうかがすぐに分かります。LogBoxをインストールした状態でサイトを巡回したりしていると、エラーが出ているのがすぐに分かり、改善につなげられるでしょう。 LogBoxはTypeScript製のソフトウェア（ソースコードは公開されていますが
新Edgeでクリック時にmousemoveイベントが発火される問題 | バシャログ。
こんにちわ。山崎です。最近更新できておらず、久々の投稿になります。 今回はとあるプロジェクトの開発中に2020年1月15日にリリースされた新Egdeでの不具合を見つけたのでそれについて書いていこうと思います。 何を作っていたのか イベントサイトの会場マップでそのマップをドラッグしたらマップの位置を移動し、 クリックしたら該当の小間番号のモーダルが開き詳細が見られるというものです。 実際のソースコードを載せることはできないので、今回複数の企業が合同セミナーイベントを行うという程でかなり簡易的なものですがdemoを作ってみました。 デモはこちら 画面収録 2020-06-29 16.35.25.mov ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>EdgeとChromeでclick時にmousemoveが発火
jsoff - JavaScriptオンオフを切り替えるGoogle Chrome機能拡張
JavaScriptが高機能化し、もはやJavaScriptを使っていないWebサイトが見当たらないくらいです。しかし、だからこそJavaScriptをオフにした状態でどう表示されるのか気になることがあります。 Google ChromeでJavaScriptをオフにするのは開発者ツールを使わないといけないですが、jsoffを使えば簡単に設定を切り替えられます。 jsoffの使い方 インストールするとツールバーにアイコンが表示されるようになります。 オンオフすると、リロードなしに反映されます。 リロードせずにJavaScriptのオンオフを切り替えられるのは意外と便利です。Webアプリケーションとして開発している場合は気になりませんが、メディアサイトなどの場合はJavaScriptが無効になった状態でも閲覧できるかどうかは大事でしょう。そんな時に確認に便利です。 jsoffはGoogle
「Google Chrome 77」安定版リリース、パフォーマンス計測機能の向上やJavaScriptからフォームデータを自由に編集できる機能などが追加
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン77.0.3865.75がリリースされました。ウェブサイトのパフォーマンス計測機能が強化されたほか、送信するフォームデータをJavaScriptから自由に編集できる機能が追加されています。 New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities - YouTube ◆パフォーマンス計測機能が強化される 以前より、コンテンツの描画が始まった段階を示す「First Paint」「First Contentful Paint」や、意味のある画面が表示された時点を示す「First Meaningful Paint(FMP)」、そしてユーザーが操作可能になる時点を示す「Time to Interacti
jdetects - 開発者ツールが開いたのを検知 MOONGIFT
昔、HTMLソースの中に秘密のメッセージを埋め込むのが流行りました。例えば求人を入れていたり、問題を書いておくといった具合です。当たり前のことですが、開発者ツールを開くのは開発者くらいです。だからこそ良い宣伝になったのです。 そんな特徴を使って遊べるのがjdetectsです。開発者ツールを開いたタイミングでイベントを実行できます。 jdetectsの使い方 jdetectsのイベント設定です。 jdetects.create(function(status) { document.querySelector("#devtool-status").innerHTML = status; }); 開いていない状態です。 開いたタイミングでCSSのプロパティを変更しています。 jdetectsはGoogle Chromeだけでなく、Safariなどでもイベントが発火します。コンソールにメッセージ
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)に対して一括検索が
Console Importer - DevToolsで外部ライブラリをインポート
Google Chromeの開発者ツールを使っていて、外部のライブラリを使いたいと感じることは多々あります。そんな時にはJavaScriptのコードをすべて貼り付けたり、スタイルシートを動的に生成して読み込む手があります。しかし毎回やるのは面倒です。 そこで使ってみたいのがConsole Importerです。簡単に外部ライブラリを読み込めます。 Console Importerの使い方 $iというオブジェクトが追加されます。後はこれにJavaScriptやスタイルシートのURLを渡すだけです。 さらに jquery@2 といったような指定もできます。スタイルシートも特に変わらず使えます。 Console Importerをインストールしておけば、Webサイトの開発やデバッグ作業がとても楽になることでしょう。ライブラリを利用する際の手間が大幅に減るはずです。 Console Importe
ニコニコ動画をHTML5で表示し倍速再生・好きな場所から再生なども可能にするスクリプト
ニコニコ動画の一般会員は本来なら使えないはずの「ムービーをシークバーの好きな場所から再生させる」機能や、PCから行えないはずの「ムービーの倍速再生」が行えてしまうスクリプトが公開されました。複数動画同時再生の制限回避なども可能で、Firefox・Google Chromeに対応しています。 ニコ動をHTML5で再生するスクリプト作った : lowlevelaware https://www.reddit.com/r/lowlevelaware/comments/3mk689/ 「ニコ動をHTML5で再生するスクリプト」はGoogle ChromeとFirefoxで動作するとのことなので、まずはGoogle Chromeで試してみます。Chrome ウェブストアでTampermonkeyのページを開いて「CHROMEに追加」をクリック。 「Tampermonkeyを追加しますか？」と聞かれる
Three.js Editor Extension for Google Chrome·Three.jsコンテンツを編集できるChrome機能拡張 MOONGIFT
WebGLはWebという冠はついているものの、HTMLやJavaScriptとは全く異なる言語となっています。そのため、素のWebGLを扱うのはとても面倒であり、ラッピングしたライブラリを使うことが多いようです。その中で最も有名なのはThree.jsでしょう。 Three.jsを使えばWebGLコンテンツを扱いやすくなるものの、調整する度にWebブラウザをリロードして確認という作業は面倒です。そこでChrome DevTools上でThree.jsコンテンツが編集できるThree.js Editor Extension for Google Chromeを使ってみましょう。 Three.js Editor Extension for Google Chromeの使い方 Three.js Editor Extension for Google ChromeはChromeストアでは公開されてい
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」を紹介します。 １．概要 Google Chromeでページを表示したとき、そもそもJavaScriptエラーが発生しているかどうかが分かりません。 JavaScriptエラーと分かった場合でも、次のようにコンソールを開かないと詳細を確認することができません。 このアドオンを利用すれば、ページを表示した時点でJavaScriptエラーを知ることができます。 なおコンソールを使ったJavaScriptエラーの確認方法については、「JavaScriptエラーを表示・確認する方法のまとめ」をご覧ください。 ２．インストール 「JavaScript Errors Notifier」のページを開きます。 右上にある「CHROMEに追加」をクリック。 表示された
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint - かちびと.net
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
Google Chrome でサイトをうまく表示する方法
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」:phpspot開発日誌
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 2011年05月10日- JavaScript Errors Notifier - Chrome ウェブストア JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 エラーがあった場合に、アドレスバーの星アイコンのとなりに次のように通知してくれます。 アイコンをクリックすれば具体的なエラー内容が分かるという物。 赤のアイコンでエラー検知が分かりやすくていいですね。 通常の状態ではエラーがあろうと、デベロッパーツール等でコンソールを開いてない限り気づくことは出来ませんが、これは開発者は必須のツールかもしれませんね。 関連エントリ PHPのエラーなんかをブラウザで確認できるC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Copy Guard - 不正なクリップボード操作を監視するGoogle Chrome機能拡張 MOONGIFT
Webページで使用されているスクリプト・プラグイン・テクノロジーが何なのかがすぐに分かるChromeの機能拡張 -WhatRuns