setIsParsed(!isParsed)}>\r\n {isParsed ? 'view raw' : 'view parsed'}\r\n
\r\n );\r\n return [isParsed, toggleParsedButton];\r\n};\r\n\r\n/**\r\n * Attempt to parse JSON data\r\n */\r\nconst parse = (data) => {\r\n try {\r\n return JSON.parse(data);\r\n } catch (error) {\r\n return null;\r\n }\r\n};\r\n","import { useState } from 'preact/hooks';\r\n\r\n/**\r\n * Determine the 'raw string' representation of arbitrary data\r\n */\r\nexport default (raw) => {\r\n // Use state for async reads e.g. blobs\r\n const [data, setData] = useState(raw);\r\n\r\n // If it's a text or json blob convert it to a string\r\n if (data instanceof Blob && (data.type === 'application/json' || data.type === 'text/plain')) {\r\n const reader = new window.FileReader();\r\n reader.onload = (event) => {\r\n setData(event.target.result);\r\n };\r\n reader.readAsText(data);\r\n }\r\n\r\n // Return a string only if we managed to get one\r\n return typeof data === 'string' ? data : null;\r\n};\r\n","// extracted by mini-css-extract-plugin\nexport default {\"network\":\"JKxZR\",\"list\":\"EFGL1\"};","// extracted by mini-css-extract-plugin\nexport default {\"requestSummary\":\"pdo4i\",\"selected\":\"eIlCf\",\"status\":\"oCH_E\",\"method\":\"yBHm5\",\"url\":\"YQTBE\"};","import { createRef, h } from 'preact';\r\nimport styles from './RequestSummary.module.scss';\r\nimport ResponseStatus from './ResponseStatus';\r\nimport { useEffect } from 'preact/hooks';\r\nimport cn from '../../../utilities/className';\r\n\r\n/**\r\n * Request summary - A single row in the request list\r\n */\r\nexport default ({ request, onSelect, isSelected }) => {\r\n const ref = createRef();\r\n\r\n useEffect(() => {\r\n isSelected && ref.current.focus();\r\n });\r\n\r\n const onKeyDown = (event, request) => {\r\n if (event.key === 'Enter') {\r\n onSelect(event, request);\r\n } else if (event.key === 'ArrowUp' || event.key === 'Up') {\r\n event.target.previousSibling && event.target.previousSibling.click();\r\n event.preventDefault();\r\n } else if (event.key === 'ArrowDown' || event.key === 'Down') {\r\n event.target.nextSibling && event.target.nextSibling.click();\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n ;\r\n\r\n return [\r\n resizer,\r\n size,\r\n ];\r\n};\r\n","import { createRef, h } from 'preact';\r\nimport { useEffect, useState } from 'preact/hooks';\r\nimport RequestDetails from './RequestDetails';\r\nimport styles from './Network.module.scss';\r\nimport RequestSummary from './RequestSummary';\r\nimport useResizer from '../../useResizer';\r\n\r\n/**\r\n * The content and logic for the Network tab\r\n */\r\nexport default ({ networkData }) => {\r\n const [selectedRequest, setSelectedRequest] = useState(null);\r\n const ref = createRef();\r\n const [resizer, width] = useResizer({ defaultSize: 350, targetRef: ref, resizeWidth: true });\r\n\r\n const onSelectRequest = (event, request) => {\r\n const selectedSelected = request === selectedRequest;\r\n ref.current && (ref.current.style['flex-basis'] = selectedSelected ? '100%' : `${width}px`);\r\n selectedSelected ? setSelectedRequest(null) : setSelectedRequest(request);\r\n };\r\n\r\n useEffect(() => ref.current && (ref.current.style['flex-basis'] = '100%'), []);\r\n\r\n return (\r\n
\r\n
\r\n {networkData\r\n .sort(request => request.startTime)\r\n .map(request => )\r\n }\r\n
\r\n
{resizer}
\r\n
\r\n \r\n );\r\n};\r\n","export default (stack) => {\r\n try {\r\n return stack.split('\\n').map((line) => ({\r\n path: (line.match(/^( *at )(.*)/) || [])[2],\r\n url: (line.match(/(http:\\/\\/.*?):\\d+:\\d+/) || [])[1],\r\n fileName: (line.match(/.+[\\\\/(](.*?\\.\\w+)/) || [])[1],\r\n lineNumber: (line.split(':').slice(-2, -1) || [])[0],\r\n columnNumber: (line.split(':').slice(-1)[0].match(/\\d+/) || [])[0],\r\n })).filter(frame => frame.path);\r\n } catch (e) {\r\n return [];\r\n }\r\n};\r\n","import parseStack from './parseStack';\r\n\r\n/**\r\n * Expose callbacks for when window console functions are used\r\n * This is not a React hook\r\n */\r\n\r\n// Store original window.console and window.onerror\r\nexport const console = Object.assign({}, window.console);\r\nexport const onError = window.onerror && typeof window.onerror === 'function' ? window.onerror.bind({}) : null;\r\n\r\n/**\r\n * Is executed when a `console[level]` is executed (when hook is enabled)\r\n */\r\nlet consoleCallback;\r\n\r\n/**\r\n * Override the 4 \"level\" functions (log, warn, error, info)\r\n */\r\nexport const overrideWindowConsole = () => {\r\n const levels = ['log', 'warn', 'error', 'info'];\r\n levels.forEach((level) => {\r\n window.console[level] = (...args) => {\r\n const isError = args.length === 1 && args[0] instanceof Error;\r\n const stackPreFtwelve = getStack().split('\\n').splice(3).join('\\n');\r\n const stack = parseStack(isError ? args[0].stack : stackPreFtwelve);\r\n if (typeof consoleCallback === 'function') {\r\n consoleCallback({ level: level, args, stack });\r\n }\r\n return console[level] && console[level].apply(window.console, args);\r\n };\r\n });\r\n};\r\n\r\n/**\r\n * Only way to get a stack in IE is throw an actual error!\r\n */\r\nconst getStack = () => {\r\n try {\r\n throw Error();\r\n } catch (error) {\r\n return error.stack || '';\r\n }\r\n};\r\n\r\nexport const restoreWindowConsole = () => {\r\n window.console = Object.assign({}, console);\r\n};\r\n\r\nexport const overrideWindowOnError = () => {\r\n window.onerror = (message, source, lineNo, colNo, error) => {\r\n if (typeof onError === 'function') {\r\n onError.call(this, message, source, lineNo, colNo, error);\r\n }\r\n window.console.error(error);\r\n return true;\r\n };\r\n};\r\n\r\nexport const restoreWindowOnError = () => {\r\n window.onerror = onError ? onError.bind({}) : null;\r\n};\r\n\r\nconst enable = () => {\r\n overrideWindowConsole();\r\n overrideWindowOnError();\r\n};\r\n\r\nconst disable = () => {\r\n restoreWindowConsole();\r\n restoreWindowOnError();\r\n};\r\n\r\nconst onConsole = callback => (consoleCallback = callback);\r\n\r\nexport default {\r\n enable,\r\n disable,\r\n onConsole\r\n};\r\n","/**\r\n * Expose readystatechange callbacks for all XMLHttpRequest requests and add additional data to the instance\r\n * This is not a React hook\r\n */\r\n\r\n// Store original xhr open and send\r\nexport const open = XMLHttpRequest.prototype.open;\r\nexport const setRequestHeader = XMLHttpRequest.prototype.setRequestHeader;\r\nexport const send = XMLHttpRequest.prototype.send;\r\n\r\n/**\r\n * Override XHR functions\r\n */\r\nconst enable = () => {\r\n XMLHttpRequest.prototype.open = function(_method, _url, _async, _user, _password) {\r\n // Add `open` args to `this` so it is available in the callbacks\r\n Object.assign(this, { _method, _url, _async, _user, _password });\r\n\r\n // Provide a place for setRequestHeader to store request headers\r\n this._headers = {};\r\n\r\n // Execute our callback whenever an event fires\r\n this.addEventListener('abort', onChange, false);\r\n this.addEventListener('error', onChange, false);\r\n this.addEventListener('load', onChange, false);\r\n this.addEventListener('loadStart', onChange, false);\r\n this.addEventListener('progress', onChange, false);\r\n this.addEventListener('readystatechange', onChange, false);\r\n this.addEventListener('timeout', onChange, false);\r\n\r\n // Call the normal `open` function\r\n open.call(this, _method, _url, _async, _user, _password);\r\n };\r\n\r\n XMLHttpRequest.prototype.setRequestHeader = function(header, value) {\r\n // Add header to the array\r\n if (!this._headers[header]) this._headers[header] = [];\r\n this._headers[header].push(value);\r\n\r\n // Call the normal `setRequestHeader` function\r\n setRequestHeader.call(this, header, value);\r\n };\r\n\r\n XMLHttpRequest.prototype.send = function(data) {\r\n // Add `data` to `this` so it is available in the callbacks\r\n this._data = data;\r\n\r\n // Call the normal `send` function\r\n send.call(this, data);\r\n };\r\n};\r\n\r\n/**\r\n * Restore original functions causing no callbacks to be executed\r\n */\r\nconst disable = () => {\r\n XMLHttpRequest.prototype.open = open;\r\n XMLHttpRequest.prototype.send = send;\r\n XMLHttpRequest.prototype.setRequestHeader = setRequestHeader;\r\n};\r\n\r\n/**\r\n * Always execute onChange, using the custom callback if set\r\n */\r\nlet customOnChange;\r\nconst onChange = (event) => {\r\n if (typeof customOnChange === 'function') {\r\n customOnChange(event);\r\n }\r\n};\r\n\r\nexport default {\r\n enable,\r\n disable,\r\n onChange: callback => (customOnChange = callback),\r\n};\r\n","import { useEffect, useReducer } from 'preact/hooks';\r\nimport xhrHook from '../utilities/xhrHook';\r\n\r\n/**\r\n * Subscribe to xhrHook to maintain a list of request instances as they occur\r\n */\r\nexport default () => {\r\n const [requests, updateRequest] = useReducer(reducer, []);\r\n\r\n useEffect(() => {\r\n xhrHook.onChange(updateRequest);\r\n }, []);\r\n\r\n return requests;\r\n};\r\n\r\nconst reducer = (requests, event) => {\r\n const xhr = event.target;\r\n\r\n // If we know about this request use it, otherwise create a new one\r\n const index = requests.map(request => request.xhr).indexOf(xhr);\r\n const request = index > -1 ? requests[index] : createRequest(event, xhr);\r\n\r\n // Remove the old one\r\n if (index > -1) requests.splice(index, 1);\r\n\r\n // Populate fields that change\r\n if (xhr.readyState === XMLHttpRequest.DONE && !request.endTime) {\r\n request.endTimeStamp = event.timeStamp;\r\n request.endTime = request.startTime + (request.endTimeStamp - request.startTimeStamp);\r\n }\r\n request.data = xhr._data;\r\n request.headers = xhr._headers;\r\n request.headersRaw = Object.keys(xhr._headers)\r\n .reduce((string, key) => `${string}\\n${key}: ${xhr._headers[key].join(',')}`, '')\r\n .trim();\r\n request.responseHeadersRaw = xhr.getAllResponseHeaders().trim();\r\n request.responseHeaders = request.responseHeadersRaw\r\n .split('\\r\\n')\r\n .filter(Boolean)\r\n .reduce((headers, headerString) => {\r\n const [key, value] = headerString.split(': ');\r\n headers[key] = value;\r\n return headers;\r\n }, {});\r\n request.response = xhr.response;\r\n request.responseText = (xhr.responseType === '' || xhr.responseType === 'text') ? xhr.responseText : null;\r\n request.responseStatus = (event.type === 'error' || request.responseStatus === -1) ? -1 : xhr.status;\r\n request.responseType = xhr.responseType;\r\n\r\n // Add this new/updated one to the list\r\n return [...requests, request];\r\n};\r\n\r\nconst createRequest = (event, xhr) => {\r\n return {\r\n startTime: new Date().getTime(),\r\n startTimeStamp: event.timeStamp,\r\n endTime: null,\r\n method: xhr._method,\r\n url: xhr._url,\r\n data: null,\r\n status: null,\r\n xhr: xhr,\r\n };\r\n};\r\n","import { h, render } from 'preact';\r\nimport App from './components/App';\r\nimport xhrHook from './utilities/xhrHook';\r\nimport consoleHook from './utilities/consoleHook';\r\n\r\n/**\r\n * Main F-Twelve API\r\n */\r\n\r\n// Render the app right away, so it is functional even if it's not attached\r\nconst el = document.createElement('div');\r\nel.id = 'f-twelve';\r\nrender(
, el);\r\n\r\nlet customOnAttach;\r\nlet customOnDetach;\r\nlet keyDownStack;\r\nlet attached;\r\nlet active;\r\n\r\nconst enable = ({ show = true } = {}) => {\r\n active = true;\r\n if (show) {\r\n attach();\r\n }\r\n enableKeyboardTrigger();\r\n consoleHook.enable();\r\n xhrHook.enable();\r\n};\r\n\r\nconst disable = () => {\r\n active = false;\r\n detach();\r\n disableKeyboardTrigger();\r\n consoleHook.disable();\r\n xhrHook.disable();\r\n};\r\n\r\nconst attach = () => {\r\n if (attached === true || active !== true) {\r\n return;\r\n }\r\n document.body.appendChild(el);\r\n attached = true;\r\n if (typeof customOnAttach === 'function') {\r\n customOnAttach();\r\n }\r\n};\r\n\r\nconst detach = () => {\r\n if (attached !== true) {\r\n return;\r\n }\r\n document.body.removeChild(el);\r\n attached = false;\r\n if (typeof customOnDetach === 'function') {\r\n customOnDetach();\r\n }\r\n};\r\n\r\nconst enableKeyboardTrigger = () => {\r\n keyDownStack = '';\r\n document.addEventListener('keydown', onKeyDown);\r\n document.addEventListener('keyup', onKeyUp);\r\n};\r\n\r\nconst disableKeyboardTrigger = () => {\r\n document.removeEventListener('keydown', onKeyDown);\r\n document.removeEventListener('keyup', onKeyUp);\r\n};\r\n\r\nconst onKeyDown = (event) => {\r\n keyDownStack += event.key;\r\n const legacyF12 = event.key !== 'F12' && keyDownStack.toUpperCase() === 'F12';\r\n const ctrlF12 = event.key === 'F12' && event.ctrlKey;\r\n if (!legacyF12 && !ctrlF12) {\r\n return;\r\n }\r\n if (attached) {\r\n detach();\r\n } else {\r\n attach();\r\n }\r\n};\r\n\r\nconst onKeyUp = () => {\r\n keyDownStack = '';\r\n};\r\n\r\nconst getKeyDownStack = () => keyDownStack;\r\nconst onAttach = callback => (customOnAttach = callback);\r\nconst onDetach = callback => (customOnDetach = callback);\r\n\r\nexport {\r\n el,\r\n attach,\r\n detach,\r\n disable,\r\n disableKeyboardTrigger,\r\n enable,\r\n enableKeyboardTrigger,\r\n getKeyDownStack,\r\n onKeyDown,\r\n onKeyUp,\r\n onAttach,\r\n onDetach,\r\n};\r\n","import { createRef, h, Fragment } from 'preact';\r\nimport styles from './App.module.scss';\r\nimport Icon from './Icon';\r\nimport Console from './tabs/console/Console';\r\nimport Network from './tabs/network/Network';\r\nimport { useState } from 'preact/hooks';\r\nimport useConsoleData from './useConsoleData';\r\nimport useNetworkData from './useNetworkData';\r\nimport useResizer from './useResizer';\r\n\r\n/**\r\n * Root app view\r\n */\r\nexport default () => {\r\n const ref = createRef();\r\n const [isOpen, setOpen] = useState(false);\r\n const [activeTab, setActiveTab] = useState('console');\r\n const consoleData = useConsoleData();\r\n const networkData = useNetworkData();\r\n const [resizer, height] = useResizer({ defaultSize: 350, targetRef: ref });\r\n\r\n const tabContents = {\r\n console:
,\r\n network: \r\n };\r\n\r\n const toggleOpen = () => {\r\n ref.current && (ref.current.style.height = isOpen ? '0px' : `${height}px`);\r\n setOpen(!isOpen);\r\n };\r\n\r\n const onClickTab = (event) => setActiveTab(event.target.textContent.toLowerCase());\r\n const getTabClassName = (tabName) => `${styles.tab} ${activeTab === tabName ? styles.activeTab : ''}`.trim();\r\n\r\n const icon = ;\r\n\r\n return (\r\n \r\n {!isOpen ? icon : (\r\n
\r\n {resizer}\r\n {icon}\r\n \r\n
Console
\r\n
Network
\r\n
\r\n {tabContents[activeTab]}\r\n
\r\n \r\n )}\r\n