[B! JavaScript][Web制作] norip44のブックマーク

ChromeのデベロッパーツールでJSをデバッグする方法 - ICS MEDIA

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。本記事ではChrome・Edgeブラウザーの「Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。この記事で学べることデベロッパーツールの使い方 JavaScriptのブレークポイントの使い方実行

norip44 2023/10/15

リンク

意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜かずたか

※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！こんにちは。Kazutaka Shimizuです。フリーランスとしてPM、エンジニアをやっています。元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。僕自身、何度か自分のTw

norip44 2019/11/03

リンク

実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。フレームワークにとらわれない React、V

norip44 2019/10/07

どれ使おうか悩んでいたけど、これにしてみます。

リンク

一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks

一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための