今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
ファイルが更新されないときのキャッシュの消し方いろいろ（ひとり DevTools Advent Calendar 2020 – 17日目） | Ginpen.com
17 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ちょっとここおかしいな簡単だからさらりと修正しちゃおうよしほら終わったコミットだデプロイだ、ええとでも反映されないなおかしいな？ そんな経験あると思うんですが、キャッシュって厄介ですよね。DevTools を使ってどうにか強制的に最新版へ更新したりできます。 先にまとめ Network パネルの Disable cache を使おう それはそれとしてキャッシュ戦略うまくやろう キャッシュを利用しているかの確認 Network パネルでリクエストを監視して、一覧の Size の項目に出てきます。 “(disk cache)” がブラウザーが保存していたキャッシュファイルを利用した場合です。ネットワークを利用しませんでした。また再読み込みのときに “(memory cache)” にな
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
JavaScriptのモダンなコードとレガシーなコードを適切なブラウザに提供する方法
JavaScriptのモダンなコードとレガシーなコード、適切なコードを適切なブラウザに提供する方法を紹介します。特に、Edge, Safariあたりは注意が必要です。 Modern Script Loading by Jason Miller 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに どうすればよいか オプション 1: 動的にロードする オプション 2: userAgentを利用する オプション 3: 古いブラウザにペナルティを与える オプション 4: 条件付きバンドルを使用する どれを使用すればよいか？ 参考文献 はじめに 適切なコードを適切なブラウザに提供するのは難しい場合があります。この記事でそれを解決するいくつかの方法を紹介します。 モダンなコードをモダンブラウザに提供することはパフォーマンスが向上します
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
Android 4.4.2以下で起こる、特にうざったい不具合・バグの解決法【厳選4策】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですが、みなさんの嫌いなブラウザはなんですか？ IE8とかでしょうか。わかりますその気持ち。しかし、ブラウザ界にはもっと厄介な野郎がおります。 それが、Androidブラウザです。 一部ではChromeに似た性能などと言われておりますが、開発者からしたら、えっ・・・(；´Д｀)といった感じです。Android OS 4.4.4辺りからかなりよくなってきましたが、4.4.2以下はiOS基準でコーディングすると不具合ありまくり。 そんなAndroidさんのバグ・不具合の中でも、今回はとりわけネット上で解決策が見つかりにくかったものと、その解決策をまとめてみました。ぜひ参考にしていただければと思います。 ▼目次 position: fixedを指定している要素に%でwidthを指定すると無視される Web
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね
:not擬似クラスでCSS3のサポートをチェックする方法
CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。 １．はじめに 「:checked擬似クラスでチェックボックスに連動して要素を表示させる方法」で、CSSの:checked擬似クラスを使ってチェックボックスの操作に連動してテキストエリアの表示を制御する方法を紹介しました。 前述の記事の再掲になりますが、HTMLとCSSの設定は次のとおりです。 <style> .bar { display: none; } input:checked + label + div { display: block; } </style> <div> <input id="foo" type="checkbox" name="foo"> <label for="foo">foo</label> <div class="bar"> <label for="bar">bar:</label>
Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
ときどきWEB | スマホやブラウザの画面サイズや向きを取得してやんよ!!!
アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含
HTML5のlocalStorageの使い方のまとめ
HTML5のlocalStorageの使い方のまとめです。 ここではlocalStorageを使った文字列の保存・取得方法に加え、オブジェクトのデータの保存・取得方法についても説明します。 記事の最後にサンプルも掲載しています。 １．localStorageとは localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、ブラウザを閉じてもlocalStorageのデータは保存されます。 データは、キーと値の組み合わせで保存されます。 localStorageはwindowsオブジェクトのプロパティなので、正しくは「window.localStorage」ですが、「window.」は省略して実装することができます。 ２．localStorageにデータを設定する localStorageにデータを設定するには、setItem()を利用します。 localS
テキストリンクの一部をコピーする方法のまとめ
テキストリンクの一部をコピーする方法をまとめました。 １．はじめに 「テキストリンクの一部をコピーする」というのは、たとえばa要素が付与された「これはリンクです」というテキストリンクがあるとしたら、 「リンク」という部分だけをコピー（というか選択）することを指します。 テキストリンクの一部をコピー テキストリンク全体、あるいは端を含めた一部をコピーするのはそれほど難しくありません。 テキストリンク全体をコピー テキストリンクの端を含んだ一部をコピー が、テキストリンクの途中を選択（してコピー）するには、ちょっとしたテクニックが必要です。 ということで、テキストリンクの一部をコピーする方法について調査してみました。 ２．テキストリンクの一部をコピーする ネットの情報やサンプルを使った実験で、基本的には以下の方法で取得できることが分かりました。 まず、リンクテキストで取得したい文字にカーソルを
ブラウザに「Related Searches」「ご利用のPCは近々クラッシュします！」「OKをクリックして、すぐにクリーンアップしてください。」が表示される場合の対処
ブラウザに「Related Searches」や「ご利用のPCは近々クラッシュします！」「OKをクリックして、すぐにクリーンアップしてください。」などの広告が表示される場合の対処方法を紹介します。 １．問題点 ある日突然ブラウザの左側や下部に広告みたいなものが表示され始めました。 （クリックで拡大） 本来の表示部分を取り除くと、次のように3ヶ所表示されています。 （クリックで拡大） 左側には縦長の「Related Searches」というバナーが表示されています。 ページ下には「アドバンスドシステムプロテクターがアイテムを2個検出しました～今すぐ消去」という意味不明なメッセージが表示されます。 「OKをクリックして、すぐにクリーンアップしてください。」というバナーが表示される場合もあります。 「ご利用のPCは近々クラッシュします！」というバナーが表示される場合もあります。 スクリーンショッ
NYタイムズのITコラムニストが教える10コの時間節約術
By Ty ITの進化によってさまざまな事が便利になりタスクワークの時間が大幅に節約されました。しかし、そのITの使い方次第では、かえって面倒な作業を強いられるという本末転倒なこともしばしばあります。そんなIT使いこなし術で、意外と知られていない便利な方法を、ニューヨークタイムズのITジャンル・コラムニストであるデビッド・ポーグ氏がレクチャーしてくれます。 (字幕付)デビッド・ポーグ: 時間節約技トップ10 | Video on TED.com http://www.ted.com/talks/lang/ja/david_pogue_10_top_time_saving_tech_tips.html 「どういうわけかテクノロジーについて基本を学習する機会は与えられていません」と話し出すデビッド・ポーグ氏。 ITで困難に行き当たっても、誰もやり方を教えてくれません。今回は、当たり前だけど意外
Android ブラウザのキャッシュクリアする方法
スマートフォン用のサイトを作っていて、実機で確認しながら修正したりすると、変更してサーバにアップしたにも関わらず、あれっ変わってないていうことを何度も経験しちゃう。。。 単純にキャッシュクリアできてなくて、古いファイルを読みにいっているだけというオチなのですが。 いつもどうやってキャッシュクリアするんだっけ？ってなるので、メモ。 アンドロイド端末でキャッシュクリアする方法 方法① ブラウザ開いた状態で、 [メニュー] ↓ [その他] ↓ [設定] ↓ [キャッシュを消去] ↓ [OK] アンドロイド端末でキャッシュクリアする方法 方法② [設定] ↓ [アプリケーション] ↓ [アプリケーションの管理] ↓ [すべて] ↓ [ブラウザ] ※chrome や firefoxなど使用しているブラウザを選択 ↓ [キャッシュを消去] 20140314追記 Android 4.X ブラウザキャッシ
ブラウザでパスワードを表示する方法のまとめ
ブラウザのパスワードを表示する方法のまとめです。 通常、ブラウザに入力したパスワードは黒い丸印で非表示になります。 本エントリーで解説する方法で、次のようにパスワードを表示することができます。 その他、ブラウザのパスワード管理機能を使ってパスワードを確認することもできます。 このエントリーは「Chrome などで保存したパスワードが丸見えだから危険とか言われている件について | WWW WATCH」の便乗記事です。内容はビギナーの方向けです。 ご自身のパスワードを忘れたときに活用してください。 １．Google Chromeでパスワードを表示する 「Google Chromeの設定」→「設定」をクリック。 「詳細設定を表示」をクリック。 「パスワードとフォーム」の「保存したパスワードの管理」をクリック。 パスワードを保存しているURLとユーザー名の一覧が表示されます。 （クリックで拡大）
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
