【rails】jQueryとデバック

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

jQueryを使ってみる
- jqueryの動作を確認
【debugger】デバックする
- Console画面でできること
  - 変数の確認、jqueryの実行
  - メッセージの確認

jQueryを使ってみる

app/javascript/packs/application.jsを開く

import $ from 'jquery'

node_modulesからjqueryを読み込んできて、使えるようになる

jqueryの動作を確認

articleのタイトル(h1)をクリックしたら、「CLICKED」とアラートを表示したい

import $ from 'jquery'

document.addEventListener('DOMContentLoaded', () => {
  $('.article_title').on('click', () => {
    window.alert('CLICKED')
  })
})

①クラス名を検証で確認

②リロード後、タイトルをクリックするとアラートが表示された

↓　JavaScript忘れてしまったので復習

【JavaScript】HTML要素を取得→加工→出力する

【debugger】デバックする

どこまで動いていて、どこに原因があるのか調べる（railsと考え方は同じ）

JavaScriptでデバックするには、debuggerを使う

debuggerは検証ツールを開いておかないと動かない

document.addEventListener('DOMContentLoaded', () => {
  debugger
  $('.article_title').on('click', () => {
    window.alert('CLICKED')
  })
})

リロードすると、debuggerのところで処理が止まる

Console画面でできること

変数の確認、jqueryの実行

コードの処理が止まっているとき、検証ツールのConsole画面で変数の確認、jqueryの実行などができる

window.alertの表示とかもできる

メッセージの確認

document.addEventListener('DOMContentLoaded', () => {
  console.log('aaaa')
  $('.article_title').on('click', () => {
    window.alert('CLICKED')
  })
})

console.log('aaaa')の実行結果が、messages部分で出力される