op-packages/luci-app-openclash/luasrc/view/openclash/debug.htm

<%#
 Copyright 2010 Jo-Philipp Wich <jow@openwrt.org>
 Licensed to the public under the Apache License 2.0.
-%>

<%
local diag_host = "www.instagram.com"
local dns_host = "www.instagram.com"
%>

<script type="text/javascript">//<![CDATA[
	function show_diag_info(addr)
	{
		var addr = addr;
		var legend = document.getElementById('diag-rc-legend');
		var output = document.getElementById('diag-rc-output');

		if (legend && output)
		{
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "diag_connection")%>', {addr: addr}, function(x, status) {
				legend.textContent = '<%:Connection Test Result%>';
				if (x && x.status == 200 && x.responseText != "")
				{
					output.innerHTML = '';
					var ta = document.createElement('textarea');
					ta.style.width = '100%';
					ta.value = x.responseText.split('\n').map(function(l) { return l.trim(); }).filter(function(l) { return l !== ''; }).join('\n');
					output.appendChild(ta);
					_cmWhenReady(function() {
						other_editor(ta, true, '100%', '400px');
					});
				}
				else if (x.status == 500)
				{
					output.innerHTML = '<span class="error"><%:Bad address specified!%></span>';
				}
				else
				{
					output.innerHTML = '<span class="error"><%:Could not find any connection logs!%></br></br><%:1. It may be that the plugin is not running%></br></br><%:2. It may be that the cache causes the browser to directly use the IP for access%></br></br><%:3. It may be that DNS hijacking did not take effect, so clash unable to reverse the domain name%></br></br><%:4. It may be that the filled address cannot be resolved and connected%></span>';
				}
			});
		}
	}

	function update_status(field)
	{
		var addr = field.value;
		var legend = document.getElementById('diag-rc-legend');
		var output = document.getElementById('diag-rc-output');
		
		if (legend && output)
		{
			output.innerHTML =
				'<span class="loading-spinner" style="vertical-align:middle"></span> ' +
				'<%:Waiting for command to complete...%>';

			legend.textContent = '<%:Collecting data...%>';
			legend.parentNode.classList.remove('oc-hidden');
			legend.style.display = 'block';
		}
		
		let HTTP = {
			checker: (domain) => {
			let img = new Image;
			let timeout = setTimeout(() => {
				img.onerror = img.onload = null;
				show_diag_info(addr);
				}, 10000);

				img.onerror = () => {
			  	clearTimeout(timeout);
  		  		show_diag_info(addr);
  			}

				img.onload = () => {
					clearTimeout(timeout);
					show_diag_info(addr);
				}

				img.src = `https://${domain}/favicon.ico?${+(new Date)}`
			},
			runcheck: () => {
				HTTP.checker(addr);
			}
			};
		HTTP.runcheck();
	}
	
	function diag_dns(field)
	{
		var addr = field.value;
		var legend = document.getElementById('dns-rc-legend');
		var output = document.getElementById('dns-rc-output');
		
		if (legend && output)
		{
			output.innerHTML =
				'<span class="loading-spinner" style="vertical-align:middle"></span> ' +
				'<%:Waiting for command to complete...%>';

			legend.textContent = '<%:Collecting data...%>';
			legend.parentNode.classList.remove('oc-hidden');
			legend.style.display = 'block';
		}
		
		if (legend && output)
		{
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "diag_dns")%>', {addr: addr}, function(x, status) {
				legend.textContent = '<%:DNS Test Result%>';
				if (x && x.status == 200 && x.responseText != "")
				{
					output.innerHTML = '';
					var ta = document.createElement('textarea');
					ta.style.width = '100%';
					ta.value = x.responseText.split('\n').map(function(l) { return l.trim(); }).filter(function(l) { return l !== ''; }).join('\n');
					output.appendChild(ta);
					_cmWhenReady(function() {
						other_editor(ta, true, '100%', '400px');
					});
				}
				else if (x.status == 500)
				{
					output.innerHTML = '<span class="error"><%:Bad address specified!%></span>';
				}
				else
				{
					output.innerHTML = '<span class="error"><%:No Response Found!%></span>';
				}
			});
		}
	}
//]]></script>

<div class="oc">
<form>
	<fieldset class="diag-style">
		<div class="oc-text-center" style="width:50%;float:left;white-space:nowrap;">
			<%:Connection Test%>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" value="<%=diag_host%>" name="diag" />
			<input type="button" value="<%:Click to Test%>" class="btn cbi-button cbi-button-apply" onclick="update_status(this.form.diag)" />
		</div>
		<div class="oc-text-center" style="width:50%;float:left;white-space:nowrap;">
			<%:DNS Test%>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" value="<%=dns_host%>" name="dns_host" />
			<input type="button" value="<%:Click to Test%>" class="btn cbi-button cbi-button-apply" onclick="diag_dns(this.form.dns_host)" />
		</div>
	</fieldset>

	<div class="diag-style oc-hidden">
		<div id="diag-rc-legend" class="diag-legend"><%:Collecting data...%></div>
		<span id="diag-rc-output"></span>
	</div>

	<div class="diag-style oc-hidden">
		<div id="dns-rc-legend" class="diag-legend"><%:Collecting data...%></div>
		<span id="dns-rc-output"></span>
	</div>
</form>
</div>