ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
DeepLの”公式”Chrome拡張がヤバイ。TwitterもSlackも英語でつぶやき放題 | DevelopersIO
ちゃだいん（@chazuke4649）です。 DeepLの公式Chrome拡張機能がヤバかったので勢いにまかせて紹介します。 "公式版"がリリースされてたの知ってた？ DeepL翻訳（ベータ版） - Chrome ウェブストア ベータ版ではありますが、いつの間にか公式版がリリースされていました。自分は今まで公式版がなかったので、以前は非公式版のツールを使っていました。 インストールする Chromeウェブストアからインストールすると、右上にアイコンが表示されます。それをクリックすると以下ポップアップ画面が表示されます。 現時点では以下２つの機能が存在します。 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる 書く: ブラウザ上に入力している文字を任意の言語に変換できる それぞれ試してみます。 「読む」 一般的にはこちらがよく認知されている機能だと思います。 下図のように、翻訳したい
【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！ | iSchool合同会社
拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバイルサイトでページ全体のキャプチャが必要なこともありますよね。 そんな時には、Chromeに標準で搭載されている機能を使えば、拡張機能を使わずに、ページ全体のスクリーンショットを撮ることが可能です。 PCサイトでページ全体のスクリーンショットを撮る方法 PCサイトでページ全体のスクリーンショットを撮る方法についてです。 次の手順で行ってください。 デベロッパーツールを立ち上げる 詳細機能を呼び出す 「capture」もしくは「full」と入力し、「Capture full size screenshot」を選択 ページ全体のスクリーンショットがダウンロードされる 1. デベ
LiveMd - Google Chrome機能拡張のMarkdownエディタ
普段使いのテキストエディタがあるので、なかなか気に入ったMarkdownエディタが見つからない…そんな方はLiveMdを試してみてはいかがでしょう。ローカルアプリケーションではなく、Google Chrome機能拡張として動作します。 LiveMdの使い方 Chromeアプリではなく、機能拡張で提供されているのが利点です。ボタンを押すだけで素早く起動できて、素早くメモができます。作成したテキストはMarkdownフォーマットでダウンロードできます。 LiveMdはGoogle Chrome用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Chrome ウェブストア - LiveMd saucer-jp/LiveMd
見ているサイトが、どのデータセンターを利用しているかがわかるアドオン「IP Address and Domain Information」
以前にご紹介した見ているWebサイトがどのデータセンターを使っているかわかるFirefoxアドオン「ASnumber」ですが、数日前から突然利用できなくなりました。職業柄、見ているサイトがどのデータセンター(or ホスティング)を利用しているか気になっているので、代わりのツールを探していたのですが、IP Address and Domain Informationというツールが代替ツールとしては利用できそうでした。 このIP Address and Domain InformationですがFirefoxの場合は、右下に出てく虫眼鏡のアイコンをクリックすると、見ている情報が表示されます。例えば、このサイトで見てみると下記のような画像が表示され、このサイトが「さくらインターネット」の上にある事がわかります。 また、ASnumberはFirefoxしかありませんでしたが、このIP Addres
本格的なDJプレイが楽しめるChrome拡張機能「Until AM for Chrome」 | ライフハッカー・ジャパン
ついにiPhone卒業→「Nothing Phone (2a)」へ。この乗換えが大正解だった!【今日のライフハックツール】
米Google社員が語った、作業が捗るGoogle Chromeテクニック20個！ – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 1．テキストのみコピペする方法。 リッチテキストエディタなどを使っていると、ブラウザからテキストをコピペした場合、画像なども付いてくる場合があります。 そんな時は「Control+Shift+V（Macだとcommand + shift + V）」を使ってペーストすると、テキストのみ貼り付けることが出来ます。 2．最後に閉じたタブを復活させる方法。 誤ってタブを閉じてしまった時は、「Control+Shift+T（Macだとcommand+shift+T）」とショートカットキーを叩くと復活させることが出来ます。 3. タブにマウスを置くと、ウェブページのタイトルの全てが読める。 Google Chromeはタブを開きすぎるとタブがとても小さくなってタイ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
シンプルでびっくりするほど使い勝手が良いWebタイマー「TimerTab」
記録をつけるとき、一定時間だけ集中したいとき（ポモドーロ）など、タイマーが役に立つのはみなさんご存知の通りですよね。 アシタノラボでは「記録」に関する様々な情報を発信していますので、今日は私が普段愛用しているWebタイマー「TimerTab」を紹介したいと思います。 TimerTab 1.シンプルで直感的なデザイン 使いたい機能をクリックし、希望の時間を入力してEnterキーを押すだけでスタートします。見た目がシンプルできれいなところも良い点です。 2.別作業中でもしっかりわかる「時間表示」 他のサイトを見ているときでも、タブのタイトル部分に「残り時間」「経過時間」が表示されます。 ブラウザ以外で作業しているときも、タスクバー上で時間を確認できるのがうれしい点です。 3.アラーム音もしっかり鳴ります 設定した時間になると、Youtube上の「サイレン」や「鐘の音」の動画がアラームとして再生
右クリックでDropboxやFacebookに画像を保存できるChrome拡張機能 | ライフハッカー・ジャパン
以前ライフハッカーでも紹介した、画像やファイルを右クリックでクラウドサービスに保存できるChrome拡張機能『Cloud Save』。前回の記事は2011年3月17日なので、当時の記事では対応しているクラウドサービスが古い内容になっています。そこで、最新版（2012年10月28日現在）のCloud Saveを今回改めて取り上げてみようと思います。 まずはChromeウェブストアからCloud Saveをダウンロードしましょう。こちらのページから無料でダウンロードできます。ダウンロードが終わったら、ウェブサイトの画像上で右クリックしてみてください。Cloud Saveという項目が追加されていると思います。 試しにFacebookを選択してみましょう。Facebookに投稿したい画像の上でCloud Saveの中にある「Facebook」をクリックします。 すると、Facebookの自分のウォ
ニコニコ動画をダウンロードできるChrome拡張機能「動画ゲッター」 | フリーソフトラボ.com
動画ゲッター 「動画ゲッター」は、ニコニコ動画など動画が埋め込まれたあらゆるサイトから動画ファイルをダウンロードできるGoogle Chrome拡張機能。動画配信サイトに限らず、ブログなどでも動画が埋め込んであればどのようなサイトからでもダウンロードできるのが特徴です。 本拡張機能をインストールし動画ファイルの埋め込んであるウェブページにアクセスすると、Google Chromeのオムニバー（アドレスバー）にボタンが表示され、これをクリックすることで動画をダウンロードを開始できる仕組み（動画の埋め込まれていないページではボタンは表示されない）。 一つの動画に対してFLV形式やMP4形式など複数の動画ファイルが用意されている場合は、任意のフォーマットの動画をリストから選んでダウンロードすることが可能ですが、冒頭に広告が挿入されているものなど、一部の動画においては再生を開始しないと認識されない
もうこれで十分？ もの書きに集中できるChromeアプリのエディタ『Writebox』 | ライフハッカー・ジャパン
こんにちは、傍島です。 文章を書く場合、何らかのお気に入りエディタを使っていると思います。私はMacを使っているので『Byword』というアプリを使っています。これは、「これまでいくつか試してダメだった人に！ 集中できるエディター『Byword』」としてライフハッカーでもご紹介したほどお気に入りです。 こうした「もの書き集中系」のアプリはなぜかMacの方が選択肢が多く、Windows派にとっては、悔しい思いをしている方もいるかもしれません。そんな方に朗報です。OSを選ばず、しかもかなり満足いく仕上がりのアプリが存在するのです。 続きは以下でご紹介します。 ご紹介するのは、Chromeで動作する『Wrirebox』という名前のテキストエディタです。 ウェブブラウザで動作するテキストエディタは数多く存在しますが、このアプリはストレージにDropboxを使っているところが特徴です。書き上げたテキ
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
Chromeでフローチャートやマインドマップを簡単に作図できる LucidChartで遊ぼう!! - 週刊アスキー
『LucidChart』はブラウザー上でさまざまな図を手早く簡単に作成できる作図ツールだ。豊富なテンプレートを元に、さまざまなシェイプをドラッグ・アンド・ドロップで配置。シェイプどうしを線でつないだり色分けすることで、専用ソフトにもひけを取らない本格的な作図を行なえる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とだこうき@デイトラ運営 on Twitter: "これもう、Google検索は要らないかもな Chromeで検索エンジンとして、Perplexity（https://t.co/unAignEWWp）を登録しておけば、めっちゃ気軽にAI使って調べ物できる。ChatGPTとは違って参考文献を提示してくれるので普通に仕事で使える。 やり方は以下のサイトが参考になる https://t.co/v5zjIxQIUS https://t.co/2LQmSgDb0G"
IDEA * IDEA
Engadget | Technology News & Reviews
