javascriptgoogle-apps-scriptgoogle-sheetsweb-applicationsgoogle-chrome-devtools
Cannot see my javascript code in userCodeAppPanel
This is code from a script contained in a Google Spreadsheet. The only other code is an onOpen which creates and menu and a showDialog() function
function showDialog(){
userInterface=HtmlService.createHtmlOutputFromFile('test');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Testing Inputs');
}
This is my javascript
<script>
var idA=['pdCliT','pdLocT','pdTypS','pdNamT','pdSupT','pdOutS','pdGasT','pdFloS','pdAmiS','pdUopN','pdVolN','pdDru','pdLOMN'];
$(function(){});
function testInputs(){
console.log('idA.join(\',\')= %s',idA.join(', '));
for(var i=0;i<idA.length;i++){
var id='#' + idA[i];
var type=String(idA[i]).slice(-1);
console.log('idA[%d]=%s , id= %s',i,idA[i],id);
switch(type){
case 'N':
var min=$(id).attr(min);
var max=$(id).attr(max);
var val=$(id).val();
console.log('type: number, min: %s, max: %s, val: %s',min,max,val);
break;
case 'T':
var val=$(id).val();
console.log('type: text, value: %s',val);
break;
case 'S':
console.log('value: %s',$(id).val());
break;
default:
var val=$(id).val();
console.log('value: %s', val);
}
}
}
console.log('test code');
</script>
And this is what I see when I click on link associated with 'test code' in console.
<!doctype html>
<style nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg">
html, body, iframe {
border: 0;
display: block;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
iframe#userHtmlFrame {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<meta name="chromevox" content-script="no">
<script type="text/javascript" src="/static/macros/client/js/769718587-mae_html_user_bin_i18n_mae_html_user.js" nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg"></script>
<script nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg">
maeInit_(true);
</script>
<iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"></iframe>
<form id="example_form"></form>
This is the entire html file.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var idA=['pdCliT','pdLocT','pdTypS','pdNamT','pdSupT','pdOutS','pdGasT','pdFloS','pdAmiS','pdUopN','pdVolN','pdDru','pdLOMN'];
$(function(){});
function testInputs(){
console.log('idA.join(\',\')= %s',idA.join(', '));
for(var i=0;i<idA.length;i++){
var id='#' + idA[i];
var type=String(idA[i]).slice(-1);
console.log('idA[%d]=%s , id= %s',i,idA[i],id);
switch(type){
case 'N':
var min=$(id).attr(min);
var max=$(id).attr(max);
var val=$(id).val();
console.log('type: number, min: %s, max: %s, val: %s',min,max,val);
break;
case 'T':
var val=$(id).val();
console.log('type: text, value: %s',val);
break;
case 'S':
console.log('value: %s',$(id).val());
break;
default:
var val=$(id).val();
console.log('value: %s', val);
}
}
}
console.log('test code');
</script>
<style>
div#menu input[type=button]{margin:0 5px 5px 0;}
div#content input, select{margin: 5px 2px;}
#content{width:400px;}
</style>
</head>
<body>
<div id="menu"></div>
<div id="content">
<h1 id="hdg1">Basic Project Data Input</h1>
<input type="text" id="pdCliT" value="Client Name" placeholder="Client" size="20" /><label for="pdCliT">Client</label><br />
<input type="text" id="pdLocT" value="Client Location" placeholder="Unit Type" size="20" /><label for="pdLocT">Location</label><br />
<select id="pdTypS" class="control"><option value="Select Unit Type" selected>Select Unit Type</option></select><label for="pdTypS">Unit Type</label><br />
<input type="text" id="pdNamT" value="Value 1" placeholder="Unit Name" size="20" /><label for="pdNamT">Unit Name</label><br />
<input type="text" id="pdSupT" value="Value 2" placeholder="Catalyst Supplier" size="20" /><label for="pdSupT">Catalyst Supplier</label><br />
<select id="pdOutS" class="control"><option value="Select Catalyst Outcome" selected>Select Catalyst Outcome</option></select><label for="pdOutS">Catalyst Outcome</label><br />
<input type="text" id="pdGasT" value="Value 3" placeholder="Carrier Gas" size="20" /><label for="pdGasT">Carrier Gas</label><br />
<select id="pdFloS" class="control"><option value="Select Gas Flow" selected>Select Gas Flow</option></select><label for="pdFloS">Gas Flow</label><br />
<select id="pdAmiS" class="control"><option value="Select Amine Scrubbing" selected>Select Amine Scrubbing</option></select><label for="pdAmiS">Amine Scrubbing</label><br />
<input type="number" id="pdUopN" value="5000" placeholder="Operating Pressure psig" size="20" min="0" max="10000" step="100" title="Not greater than 10000" /><label for="pdUopN">Unit Operating Pressure, psig</label><br />
<input type="number" id="pdVolN" value="1000" placeholder="Reactor Value ft3" size="20" min="0" max="200000" step="1000" title="Not greater than 200000" /><label for="pdVolN">Reactor Volume,ft3</label><br />
<input type="number" id="pdDruN" value="200" placeholder="Drum of QTRX2" size="20" min="0" max="500" step="100" title="Not greater than 500"/><label for="pdDruN">Drums of QTRX2</label><br />
<input type="text" id="pdLOMT" value="Value 4" placeholder="Lead OM" size="20" /><label for="pdLOMT">Lead OM</label><br />
<input type="button" id="tstInputs" value="Test Inputs" onClick="testInputs();" />
</div>
</body>
</html>
This is what the console shows when I launch the dialog
Unrecognized feature: 'picture-in-picture'.
iframedAppPanel?mid=ACjPJvGGulDc8kqHqaTVmW8ouofBnAMf3yo988NOBs-h9XUGoRpmfzwLx1oicxsS_tKSejiCuGZgzG7Uk-hD97zxYEj_J7Qna3k88V4wF0VJZqY0qcngq85y83fmy-indV7uqhh-nwbcfmY:11 Unrecognized feature: 'vibrate'.
userCodeAppPanel:2 Unrecognized feature: 'picture-in-picture'.
userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
userCodeAppPanel:30 test code
2877393808-warden_bin_i18n_warden.js:202 To {message: "There was an error during the transport or process…this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran…/js/2877393808-warden_bin_i18n_warden.js:186:252)"}
This is a simple file that I extracted from another project. I'm running it in a modeless dialog but I get the same problem in the web app which I've been debug using the console.
I'd appreciate any ideas here. I've tried going to settings and clicking on "Restore Defaults and Reload'. I've been using the console for my debugging lately because I can't seem to figure this out.
I'm wondering if it has anything to do with the picture in picture and vibrate warnings. I googled them in different ways but couldn't find anything to help me.
In answer to your question, "Can you reproduce when using native Javascript and not jQuery?".
Here's the HTML (somewhat simplified):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
window.onload=function(){
console.log('onload has run');
google.script.run
.withSuccessHandler(displayDates)
.getDates();
}
function displayDates(datObj){
var s='';
gdateObj=datObj;
for(var i=0;i<datObj.idA.length;i++){
s+=datObj[datObj.idA[i]+'-html'];
}
s+='<br /><input type="button" value="Save Dates" onClick="saveChanges();" />';
s+='<input type="button" value="Get Dates" onClick="getDates();" />';
s+='<input type="button" value="Exit" onClick="google.script.host.close();" />';
document.getElementById('dates').innerHTML=s;
for(var i=0;i<datObj.idA.length;i++){
document.getElementById(datObj.idA[i]).setAttribute("value",formatDateTime(new Date(datObj[datObj.idA[i]])));
}
}
function formatDateTime(dt){
if(dt && Object.prototype.toString.call(dt) === '[object Date]'){
var M=dt.getMonth()+1;
var d=dt.getDate();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
var MM=(M<10)?String('0'+M):String(M);
var dd=(d<10)?String('0'+d):String(d);
var hh=(h<10)?String('0'+ h):String(h);
var mm=(m<10)?String('0'+m):String(m);
var ss=(s<10)?String('0'+s):String(s);
var ds=dt.getFullYear() + '-' + MM + '-' + dd + 'T' + hh + ':' + mm;
return ds;
}else{
throw("Error: Parameter dt is not a valid date");
}
}
</script>
<body>
<div id="dates"></div>
</body>
</html>
and my console log:
Unrecognized feature: 'vibrate'.
userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
userCodeAppPanel:3 onload has run
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:194 Co {message: "There was an error during the transport or process…this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran…/js/1995166154-warden_bin_i18n_warden.js:178:252)"}message: "There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit"name: "TransportError"stack: "TransportError: There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit↵ at new Co (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:178:339)↵ at Ho.q.Cd (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:186:350)↵ at Ai (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:76:228)↵ at zi (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:491)↵ at ui.m (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:438)↵ at Ai (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:76:228)↵ at zi (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:491)↵ at Ho.<anonymous> (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:185:159)↵ at on (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:143:304)↵ at po (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:178:252)"__proto__: C
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
Here's what the screen looks like it's all dates from a spreadsheet:
And here's what the source panel looks like when I follow the link to my javascript.
<!doctype html><style nonce="TqICcsqvIDjfixWz6NYEPlNwdL0">html, body, iframe {border: 0; display: block; height: 100%; margin: 0; padding: 0; width: 100%;}iframe#userHtmlFrame {overflow-y: scroll; -webkit-overflow-scrolling: touch;}</style><meta name="chromevox" content-script="no"><script type="text/javascript" src="/static/macros/client/js/2261581559-mae_html_user_bin_i18n_mae_html_user.js" nonce="TqICcsqvIDjfixWz6NYEPlNwdL0"></script>
<script nonce="TqICcsqvIDjfixWz6NYEPlNwdL0">maeInit_( true );</script><iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"></iframe><form id="example_form"></form>
Solution
The dev tools console messages shown on top of the question aren't blocking your client-side JavaScript from being loaded into the dev tools. Those messages are generated by the platform, not by your client-side code.
Your client-side code should be shown in the Elements tab. You could use the find tool or look inside the userHtmlFrame iframe. It isn't shown in the Sources tab because there is no source file, the code is added to the DOM by a function like this
<script type="text/javascript" nonce="">
(function() {
var el = document.getElementById('sandboxFrame');
el.onload = function() {
goog.script.init("...
</script>
where the ... is a long string that might be trimmed when using Copy > Outer html.
If your client-side code is generated programmatically, for debugging purposes, you might deploy a web application that returns the client-side code as text rather than as a HtmlOutput object, i.e.
function doGet(e){
const content = HtmlService.createTempleFromFile('index').evaluate().getContent();
return ContentService.createTextOutput(content)
.setMimeType(ContentService.MimeType.TEXT)
}
Another option is to map the client-side JavaScript to Source Code. For more details about this, please checkout the last two "related" Stack Overflow quetions.
Related
- Debugging client side code from Google Apps Script
- Google Script - Error Script - userCodeAppPanel - how to find the error?
- How to map client-side code to Source Code
References
- WebTorrent : TypeError: Cannot read properties of undefined (reading 'find')
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- window.onload vs $(document).ready()
- How to export multiple components from an index file in React?
- Button doesn't have obvious onclick event
- Vue3 Carousel as ES module in Laravel blade template
- Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings
- 3rd party cookies in Android 14/New Chrome using Angular/Firebase Auth/Hosting and NodeJs in Server
- How to replace host part of a URL using javascript regex
- uncaught typeerror: cannot read properties of undefined (reading 'removeeventlistener')
- Get logarithmic byteFrequencyData from Audio
- TypeError: Cannot set property 'innerHTML' of null with a correct script location and div ID
- React how to Pass data from component to its sub-component
- Exiting While loop
- Iterate through an array and copy certain values
- Count the number of occurrences of a character in a string in Javascript
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- Apex Charts JS fill to size
- Using glob with the aspect-build bazel-examples repository typescript build?
- How to split an array and put values to observable-block?
- Converting svg path to polygon in javascript
- Output one json record react native
- Jest - TypeError: response.json is not a function
- smooth auto scroll by using javascript
- Finding JavaScript memory leaks with Chrome
- Can't show icon with fontawesome's react-js library
- Overriding control+s (save functionality) in browser
- Cypress - How to check if a checkbox is checked or not?
- Converting CSS hover event to javascript Click event
- New subscriptions always returning intial value instead of current value