137 lines
4 KiB
Bash
137 lines
4 KiB
Bash
|
#!/bin/bash
|
||
|
|
|
||
|
|
# Simple Browser Log Collection - Manual but Reliable
|
||
|
|
# This script helps you collect browser logs step-by-step with clear instructions
|
||
|
|
|
||
|
|
set -e
|
||
|
|
|
||
|
|
BASE_URL="http://localhost:3030"
|
||
|
|
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
|
||
|
|
LOG_DIR="simple-browser-logs-${TIMESTAMP}"
|
||
|
|
|
||
|
|
# Colors
|
||
|
|
GREEN='\033[0;32m'
|
||
|
|
BLUE='\033[0;34m'
|
||
|
|
YELLOW='\033[1;33m'
|
||
|
|
RED='\033[0;31m'
|
||
|
|
NC='\033[0m'
|
||
|
|
|
||
|
|
echo -e "${BLUE}🔍 Simple Browser Log Collection${NC}"
|
||
|
|
echo -e "${BLUE}=================================${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Get pages to test
|
||
|
|
if [ $# -eq 0 ]; then
|
||
|
|
pages=("/" "/contact" "/about")
|
||
|
|
echo -e "${BLUE}📋 Testing default pages: ${pages[*]}${NC}"
|
||
|
|
else
|
||
|
|
IFS=',' read -ra pages <<< "$1"
|
||
|
|
echo -e "${BLUE}📋 Testing specified pages: ${pages[*]}${NC}"
|
||
|
|
fi
|
||
|
|
|
||
|
|
# Create log directory
|
||
|
|
mkdir -p "$LOG_DIR"
|
||
|
|
echo -e "${GREEN}✅ Created directory: $LOG_DIR${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Process each page
|
||
|
|
for i in "${!pages[@]}"; do
|
||
|
|
page="${pages[$i]}"
|
||
|
|
page_num=$((i + 1))
|
||
|
|
total_pages=${#pages[@]}
|
||
|
|
page_name=$(echo "$page" | sed 's|/||g' | sed 's|^$|root|')
|
||
|
|
|
||
|
|
echo "[$page_num/$total_pages] =========================================="
|
||
|
|
echo -e "${YELLOW}🔍 Page: $page${NC}"
|
||
|
|
echo -e "${BLUE}📱 URL: $BASE_URL$page${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Step 1: Open browser
|
||
|
|
echo -e "${BLUE}Step 1: Opening browser...${NC}"
|
||
|
|
osascript -e "
|
||
|
|
tell application \"Google Chrome\"
|
||
|
|
if not (exists window 1) then
|
||
|
|
make new window
|
||
|
|
end if
|
||
|
|
set URL of active tab of window 1 to \"$BASE_URL$page\"
|
||
|
|
activate
|
||
|
|
end tell
|
||
|
|
" 2>/dev/null || {
|
||
|
|
echo -e "${RED}❌ Failed to open Chrome${NC}"
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
|
||
|
|
echo -e "${GREEN}✅ Browser opened to: $BASE_URL$page${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Step 2: Wait for hydration
|
||
|
|
echo -e "${BLUE}Step 2: Waiting for page hydration (8 seconds)...${NC}"
|
||
|
|
sleep 8
|
||
|
|
echo -e "${GREEN}✅ Hydration period completed${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Step 3: Instructions for Claude Code
|
||
|
|
echo -e "${YELLOW}Step 3: Now collect browser logs in Claude Code:${NC}"
|
||
|
|
echo ""
|
||
|
|
echo -e "${BLUE} Run these MCP tools in Claude Code:${NC}"
|
||
|
|
echo -e " ${BLUE}1. mcp__browser-tools__getConsoleLogs${NC}"
|
||
|
|
echo -e " ${BLUE}2. mcp__browser-tools__getConsoleErrors${NC}"
|
||
|
|
echo -e " ${BLUE}3. mcp__browser-tools__getNetworkErrors${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Create placeholder log file
|
||
|
|
log_file="$LOG_DIR/${page_name}.log"
|
||
|
|
cat > "$log_file" << EOF
|
||
|
|
========================================
|
||
|
|
Simple Browser Log Collection: $page_name
|
||
|
|
URL: $BASE_URL$page
|
||
|
|
Timestamp: $(date)
|
||
|
|
========================================
|
||
|
|
|
||
|
|
[$(date '+%H:%M:%S')] Browser opened to $BASE_URL$page
|
||
|
|
[$(date '+%H:%M:%S')] Page hydration completed
|
||
|
|
[$(date '+%H:%M:%S')] Ready for MCP log collection
|
||
|
|
|
||
|
|
--- PASTE CLAUDE CODE MCP RESULTS BELOW ---
|
||
|
|
|
||
|
|
=== CONSOLE LOGS ===
|
||
|
|
(Paste mcp__browser-tools__getConsoleLogs results here)
|
||
|
|
|
||
|
|
=== CONSOLE ERRORS ===
|
||
|
|
(Paste mcp__browser-tools__getConsoleErrors results here)
|
||
|
|
|
||
|
|
=== NETWORK ERRORS ===
|
||
|
|
(Paste mcp__browser-tools__getNetworkErrors results here)
|
||
|
|
|
||
|
|
--- END MCP RESULTS ---
|
||
|
|
|
||
|
|
Log file: $log_file
|
||
|
|
EOF
|
||
|
|
|
||
|
|
echo -e "${GREEN}✅ Created log file: ${page_name}.log${NC}"
|
||
|
|
echo -e "${BLUE} You can paste MCP results into: $log_file${NC}"
|
||
|
|
echo ""
|
||
|
|
|
||
|
|
# Wait for user
|
||
|
|
if [ $page_num -lt $total_pages ]; then
|
||
|
|
echo -e "${YELLOW}Press Enter when you've collected the logs to continue to next page...${NC}"
|
||
|
|
read -r
|
||
|
|
echo ""
|
||
|
|
fi
|
||
|
|
done
|
||
|
|
|
||
|
|
echo "=========================================="
|
||
|
|
echo -e "${GREEN}🎉 Collection completed!${NC}"
|
||
|
|
echo ""
|
||
|
|
echo -e "${BLUE}📁 Log directory: $LOG_DIR${NC}"
|
||
|
|
echo -e "${BLUE}📋 Log files created:${NC}"
|
||
|
|
for page in "${pages[@]}"; do
|
||
|
|
page_name=$(echo "$page" | sed 's|/||g' | sed 's|^$|root|')
|
||
|
|
echo -e " ${BLUE}- ${page_name}.log${NC}"
|
||
|
|
done
|
||
|
|
echo ""
|
||
|
|
echo -e "${YELLOW}💡 Next steps:${NC}"
|
||
|
|
echo -e " ${BLUE}1. Paste MCP results into each log file${NC}"
|
||
|
|
echo -e " ${BLUE}2. Use files for error analysis${NC}"
|
||
|
|
echo -e " ${BLUE}3. Compare patterns across pages${NC}"
|
||
|
|
echo ""
|