4TBが9千円台だって。バッファローの静音HDDは在庫があるうちに回収しておこう【Amazonセール】
【Chrome再発見】最新機能を見返したら、驚きの連続だった | ライフハッカー・ジャパン
4TBが9千円台だって。バッファローの静音HDDは在庫があるうちに回収しておこう【Amazonセール】
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
便利なChrome拡張機能を見直してみた | Pulp Note
2ヶ月前にMacbook Proを購入した際、以前の設定移行ではなく、一から設定し直しました。そのおかげでストレージの無駄がなくなり、スッキリとした状態でPCワークできています。 今回Chrome拡張機能も見直しをおこない、2ヶ月が経過しました。現在利用しているChrome拡張機能について紹介します。 1Password – パスワード保管庫 パスワード管理ができる1Password。Chromeのパスワードマネージャーもいいのですが、ここ2ヶ月ほど便利に使えているのでこちらをメインに。 Touch IDで解除できるのはとてもラク。レビューは酷いですが、私は満足しています。 1Password – パスワード保管庫 Save image as Type WebP画像をJPG、PNG形式でダウンロードできるChrome拡張機能 Save image as Type。 右クリックからサクッとダ
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～ - Qiita
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～CSSJavaScriptChrome 【事前知識】loading属性について Chromeのimg・iframe要素には、loading属性というものがある。 こいつをHTMLでloading="lazy"のように指定すると、遅延読み込みする（画像等がスクロール等で画面内に入ってきた時に初めて読み込み始める）。 こうすることで、時間がかかる無駄な読み込みが抑えられ、ページ表示速度が速くなったり、通信量を減らせたりする。 値には次の3種類があり、"lazy"が遅延読み込みオン、"eager"は遅延読み込みオフ（遅延せず愚直にすぐ読み込み）、"auto"はlazyかeagerかをChromeがネットワーク速度などを考えて自動
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
2022年版 Web制作が捗るChrome拡張機能14選 | Pulp Note
Chrome拡張機能には便利なものが多く、特にWeb制作時には積極的に利用しています。昨年も紹介しているのですが、2022年に入ってChrome拡張機能の見直しをして現在よく利用しているものだけで再構成してみたところ、無駄が減り使いやすくなりました。2022年版のおすすめChrome拡張機能を14個紹介します。 Toby for Chrome Chromeを利用しているとかならず出てくるタブ開きすぎ問題。パソコンが重くなる原因の一つで、タブは開きすぎない方が良いです。その問題を解消するのがChrome拡張機能 Toby for Chrome。ついつい増えがちなタブを一括で管理することができます。 私は、案件ごとにSPACESを用意し、関連ページや参考ページをタブで開いてまとめてブクマしています。ドラッグ&ドロップで並べかえができたり、SPACES内に複数のフォルダを用意できるので、タブ管理
Chrome DevTools の知っておくと便利かも機能 - Qiita
長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする
Chrome Devtools による フロントエンドパフォーマンスの計測
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
PC内に装備しておきたいChrome拡張機能をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ みおです。 今回は、私が普段からとてもお世話になっている「toby」というChrome拡張機能をご紹介します。 Chrome拡張機能 「toby」とは 「toby」は開いたタブを一元管理してくれるChrome拡張機能です。Better than bookmarks （ブックマークより優秀）というコンセプトで2016年にあらゆるGoogle Chrome拡張機能の中で高評価を取得しています。 「toby」では、よく使用するタブをあらかじめ登録しておくとカテゴリーごとに管理してくれ、サイトやスプレッドシート、ドキュメントなど、必要なタブを必要なときにワンクリックですべて開くことができます。 こんなお悩みを持っている方におすすめ！ よく開くサイトがあるけどGoogleから毎回検索かけている…… PCの再起動後、消えてしまったタブを1から一つひとつ開いていて面倒…… ブックマークの一
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
知ってトクするDevToolsの使い方(前編) | さくらのナレッジ
本稿は、2021年春の某日にオンラインで開催した、さくらインターネット社内向け勉強会の発表をもとに書き起こした記事です。 はじめに 「知って得するDevToolsの使い方」です。ブラウザの機能にDevToolsってあるんですけど、それの便利な使い方を紹介していきたいなと思います。この資料では、主にChromeのDevToolsを使って説明してるんですけど、EdgeであったりSafariであったりFirefoxであったり、大体同じような機能が付いているので、どんなブラウザでも使える知識と思います。 DevToolsとは まず、DevToolsは何かっていうと、他に「Developer Tools」とか「開発者ツール」って呼ぶこともあるんですけど、この資料では、DevToolsの表記で統一して説明していきます。 DevToolsは、フロントエンドの「3種の神器」って呼ばれているものの1つで、ブ
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「これは強い」 DeepL公式Chrome拡張が登場 GmailでもTwitterでも外国語の読み書きを一発変換
Can I DevTools?
Webページを閲覧しながらメモが取れるChrome拡張機能3選【今日のライフハックツール】 | ライフハッカー・ジャパン
英語学習が捗るGoogle Chrome拡張機能7選 | ライフハッカー・ジャパン