Hotwire Discussion

How can I tell turbo drive is working?

I thought that turbo drive, on link navigation, just replaces the body of the html with the new page. I seem to be getting a full page reload. Does anyone know how I can check that turbo drive is working?

// index.js
import * as Turbo from "@hotwired/turbo"

window.Turbo = Turbo

document.addEventListener("turbo:load", function(e) {
  console.group()
  console.log("turbo:load")
  console.log(e)
  console.groupEnd()
})
<!-- index.html -->
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="turbo-root" content="/app">
  <title>Turbo Drive Test</title>
  <meta name"tag" content="index.html">
  <script src="index.js" async></script>
</head>

<body>
  <h1>Hello From Index</h1>
  <a data-turbo="true" href="/next">Go To Next</a>

</body>
</html>
<!-- next.html -->
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="turbo-root" content="/app">
  <title>Turbo Drive Test</title>
  <meta name"tag" content="next.html">
  <script src="index.js" async></script>
</head>

<body>
  <h1>Hello From Next</h1>
  <a data-turbo="true" href="/">Go To Home</a>
</body>
</html>

More evidence! It seems that Turbo Drive isn’t hooking into <a href> properly. On initial load a turb-frame is correctly intercepted and makes a fetch request, but when I click a link within a turbo-frame the request type is document

(word is the request from the turbo-frame src)

Initial load
1618876758_grim

Link click request
1618876766_grim

okay, so this was wrong, word of warning to those copy pasting. But it still seems that turbo isn’t just replacing the body when clicking on an <a href>