前提として
この記事ではクッキーに入れる情報を、クライアント側で設定していますが、
セキュリティ上、基本的には「クッキーに入れる情報はサーバー側で用意したものをフロントで保管するだけ」であるべきという考えが現在は主流となっているそうです。
ーーーーーーーー
クッキー情報の取得方法などを学習がてらまとめて書いてみます。
クッキーの仕組みをまとめた記事はこちらがとてもわかりやすかったです。こちらを読んだ上or理解された上でお気軽にお読みいただければ幸いです！
ブラウザ
Chromeでは標準でクッキーを情報を見ることができます。
Chromeで検証モードに切り替え、Applicationタブを選び、その中のクッキーのアイコンの場所に、今見ているサイトのurlが表示されています。
こちらをクリックすると、そのサイト持たせているクッキー情報が、キーとバリューで表示されています。
サイトにより持たせている情報も異なりますので、いろんなサイトを見てみると面白いかも。
Twitterの場合
jsで設定する
jsではクッキー情報は複数繋がっており、sliceとか出力するのがなかなか大変なので、
jquaryのプラグイン「jquery-cookie」でコントロールしてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--jqueryとjquery-cookieを読み込み-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<title>クッキーテスト</title>
</head>
<body>
<div class="yourname">
あなたの名前は
<div class="js-cookie-yourname"></div>
です
</div>
<script>
//cookieのyournameに「太郎くん」を設定
$.cookie('yourname','太郎くん',{ secure: "None"});
//html内にクッキーの情報を挿入
$('.js-cookie-yourname').html($.cookie('yourname'));
</script>
</body>
</html>
この方法で、firefoxだとクッキーを値を出力できました。
[サイト表示]
（背景白サイトだからわかりづらい）
Chromeではうまくいかない
ただ、上記の処理を単純にローカルのURLでやった場合、Frefoxだとうまく行きますが、Chromeだと出力されません。
最近のChromeは、セキュリティ上基本的にhttpsのurlじゃないとクッキーの送信が行えなくなったようです。
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie
;secure https の通信を使用しているときだけ、クッキーが送信されます。 Chrome 52 以前では、このフラグは http ドメインからのクッキーに設定することができました。
とのこと。
サードパーティクッキー（別ドメインから発行されてるクッキー）も厳しくなったので、それと同じような感じなのだろうか。。
https://news.yahoo.co.jp/articles/2d58d3425a3a6f8b045350c88ae14162b2b5839b
（いつか調べるかも）