◆ 同じページで通常アクセスと ajax アクセスでヘッダを見てレスポンスを変えることが条件です
◆ ページを開いてすぐにソースを見ると もちろん通常アクセスのレスポンスのソースが見れます
◆ ajax アクセス後にソースを見るとキャッシュがそっちに置き換わるので ajax 用のソースが見れます
◆ json 受け取りがシンタックスエラーになったときのレスポンスの確認で devtools 出してない時でも簡単に確認できます 

Chrome でできるちょっとした裏ワザの紹介です

まず web サーバを用意します
var server = require('http').createServer()
server.on('request', function (request, response) {
    response.writeHead(200, {
        'Content-Type': 'text/html',
    })
    if(request.headers['custom-ajax'] === 'true'){
        response.end(ajax_res)
    }else{
        response.end(html)
    }
})
server.listen(7765)

var html = `
<input type="button" value="ajax" onclick="fetch('', {headers: new Headers({'custom-ajax':true})}).then(e => e.text()).then(alert)">
`

var ajax_res = `
custom ajax request!
`

node.js のコードです

やってることは ポート 7765 をリッスンして リクエストがあったら
<input type="button" value="ajax" onclick="fetch('', {headers: new Headers({'custom-ajax':true})}).then(e => e.text()).then(alert)">
という input タグだけの HTML をレスポンスとして返します

もしリクエストヘッダーに custom-ajax というキーが true という値で入っていた場合は
custom ajax request!
という ただのテキストを HTML として レスポンスを返します

ブラウザで localhost:7765 (別 PC にサーバたてたならそこのホスト名) にアクセスすると input タグの HTML が返ってくるので ボタンが 1 つあるだけのページが表示されます

ボタンを押すと↓の JavaScript が実行されます
fetch('', {headers: new Headers({'custom-ajax':true})}).then(e => e.text()).then(alert)

このコードがやってることは 自分自身の URL に対して ヘッダに custom-ajax:true を設定してリクエストを送ります
そして 結果をテキストで受け取って alert で表示します

ヘッダに custom-ajax:true と設定しているので サーバからうけとるレスポンスは 「custom ajax request」 なのでこのテキストが alert で表示されます



ここから裏ワザ部分です

普通ソースを見ると 今見てるページのソースになります
このページの場合は普通に開くと input のボタンが表示されます
なので ソースを見ると 「<input type ~~」 となります

ですが Chrome の場合は ボタンを押して 「custom ajax request」 を取得した後に ページのリロードなどをせずに ソースを見ると 「custom ajax request」 が表示されています

原因はたぶんソースを見るときはキャッシュを使っていて http://localhost:7765/ というページのキャッシュが ボタンを押して取得したときに新しい 「custom ajax request」 に変わってしまってるからです

本来見ているページのソースを見たいはずですから ソースが変更されていても見ているページのレンダリングに用いたものを保持しておいて表示すべきです
それか 同じリクエスト (custom-ajax はなし) を再度送信した結果をソースとして表示させるべきだと思います

なので バグに思えなくもないですが意外とこれが役立つんです

今回ではあまり意味がなかったですが
fetch(略).then(e => e.json()).then(e => alert(e.value))
こんな風に json として受け取るときに サーバエラーで 503 エラーの HTML が返って来た場合は 意味不明な 「<」 がシンタックスエラーというメッセージになってると思います

devtools でネットワークの監視を有効にしてると そこでレスポンスを見ればいいですが 有効になってなかったり devtools が非表示になっているともう一度同じ操作を繰り返さないとだめです

ですが この裏ワザだと 単純に Ctrl-U でソースを見れば JSON として受け取るデータを見ることができます
503 の HTML だったり JSON の出力が間違っていたとかがすぐに確認できます

ただし 同じ URL でリクエストに応じて レスポンスを変えるというちょっと特殊な方法をしてるページを作ってる時に限ります