JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目
サイトをみていて「どんなプログラムやサーバー、プラグインを使っているんだろう？」と思うことありませんか？ 私の場合、サイトのソースコードをみて判断するのですが、 ソースが長かったり、使用しているプラグインの数が多かったりすると面倒だったりします。 そんな時に教えてもらったアドオンがこの「Wappalyzer」。 ChromeやFirefoxのアドオンかブックマークレットで、 サイトで使用しているサーバーやプログラム、プラグインなどが表示されます。 Wappalyzer公式サイト Chrome Wappalyzer アドオン FireFox Wappalyzer アドオン インストール後、「Wappalyzer」アイコンをクリックすると、表示されます。 このサイトでしたら以下の感じで表示されます。
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
Chrome便利ですね。 でも、歳をとるとブラウザの拡張とか気にしなくなりますよね。 にもかかわらず、気がつけば使っていた拡張機能（エクステンション）を3つ紹介します。 縦長画面もキャプチャできる - Screen Capture (by Google) Capture visible content of a tab, a region of a web page, or the whole page as a PNG image. Support horizontal and vertical scroll… https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg スクリーンキャプチャの拡張です。まぁ便利です。楽。 Macだとcmd + shi
なぜなに篇とWebプラットフォーム篇ではBlinkに至った背景や、Blinkの互換性への取り組みについてだーっと書いた。 今回はBlinkの登場が何にどんな影響を与えるか、だらだら考えてみる。 Chrome すでに色々書いてはいるけれど。 WebKitから離れ、Chrome専用エンジンとなるので、これまでWebKitでは合意を得られなかった機能について抵抗なく入れられるのはGoogleにとってはよいことだろう。Pointer EventsとかIME APIとか。Launch Processのもとでだけど、試験実装は進めやすくなる。 WebKitから離れることでの最大の損失は、WebKitに参加している人のタレントだろう。BlinkチームのQ&Aセッションによると、BlinkとWebKitとの間に「フォーマルな関係」はないとのこと。パッチを自動的にやりとりするような仕組みは用意されないから、
よいサブタイトルが思いつかなかった。 Blinkでは、HTMLとかCSSとかDOMなどへの機能追加について、互換性、オープン標準、透明性を重視したガイドラインが設けられ、それが強くアピールされている。 Throughout this transition, we’ll collaborate closely with other browser vendors to move the web forward and preserve the compatibility that made it a successful ecosystem. In that spirit, we’ve set strong guidelines for new features that emphasize standards, interoperability, conformance testing a
4月3日、GoogleがChromeに使っていたWebKitをフォークした新しいエンジンBlinkを発表した。 …だいぶ出遅れたのでとても書きづらいけれど、自分の理解のために書く。ただいろいろあるので、まずはWebKitをフォークするに至った経緯と、Blinkの概要について。 追記 (2013-04-30)：別途ふたつエントリを書いたのでそちらもどうぞ。 Chromeの新エンジンBlink ― Webプラットフォーム篇 Chromeの新エンジンBlink ― どうなるんだろう篇 “Chromium port”としての負担 アナウンスしたAdam Barth曰く、Chrome開発時点でのWebKit採用は正しく、WebKitも大きく成長したと。 Chromium Blog: Blink: A rendering engine for the Chromium project ただ、開発を続け
レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。 メディア・クエリの確認 インスペクターを開くと、以下のように閲覧しているページに設定されているメディアク
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示 2013.03.04 | この方法お勧めです！ | 制作あるある | 覚えておきたい こんにちはピンクです。確定申告の季節ですね！青色申告の私は毎年この時期、宿題を溜めてしまった夏休み最終日の小学生のようになっています…。 さて、Sass ネタです。 Firefox の Firebug や、Chrome のデベロッパーツールで要素のスタイルを確認すると、どのスタイルシートの何行目に記述があるか分かるようになっています。 上図は Firebug で適当にとったキャプチャです。「スタイルシート名.css」の n 行目に記述があるよー、と書いてありますね。デフォルトではここは .css の何行目か、しか見てくれません。 Sass（.scss）で書いて表示確認をして「ああ～ここ少し調整したいな…」なん
Ever find yourself needing to wipe your iPhone 15 Pro Max clean? Maybe you’re planning to sell it, following an iPhone guide at i5apps.com, or perhaps it’s just time for a fresh start. Whatever your reason, performing a factory reset is a straightforward process. By the end of this quick overview, you’ll know exactly how to restore your iPhone 15 Pro Max to its original factory settings. After you
先週、Webブラウザーの世界にふたつほど衝撃的なニュースが走った。ひとつ目はMozillaがSamsungと共同でプログラミング言語Rustをベースにした新Webレンダリングエンジン「Servo」の開発を進めていくと表明したこと、そしてもうひとつが今回の主題、GoogleがWebKitを離れて「Blink」への移行を表明したことだ（開発者向けバイナリーを配布するGoogle Chrome Canary（28.0.1468.0 canary）では、すでにBlinkが含まれている模様）。 Mozillaの抱えるGecko、AppleとGoogleが推進するWebKit、そしてMicrosoftのTridentの3つは、Webブラウザー業界においてシェアのほとんどを握る3大勢力となっている。その勢力のうちのふたつが従来の技術とは別の新しいエンジン採用と開発推進をほぼ同時に発表したことは、今後のト
ブログを書くなら余計な手間は省きたい。 それはこの世に生きとし生けるもの、万物全ての祈り・・・。そんな気がする。 と、言うわけで今日は劇的にブログ作成を楽にしてくれるChromeエクステンションのご紹介。 ショートカットキーでブックマークレットを呼び出すというエクステンションで、Make LinkジェネレーターはFirefoxのMake Linkのように自分用にカスタマイズしたHTMLタグを吐くブックマークレットをつくってくれるツールです。これを組み合わせることで超高速にHTMLタグを作成できます。 例えば「Shift」+「L」でリンクタグを作成出来たり、「Shift」+「Q」で選択した文章で引用タグを作成出来るのです。9つの中で一番おすすめ! 以前、上の記事を読み、一番最初に紹介されているChromeエクステンション「Chrome Keyconfig」を導入しようとしたのですが、なるほど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
