如何解决如何调试通过HtmlService提供的Javascript？
我正在使用HtmlService为带有表单和一些Javascript的网页提供服务，但是我不知道要调试客户端代码。因为HtmlService使用iframe沙箱，所以我无法使用浏览器开发者控制台，也无法弄清楚如何将日志写入Stackdriver。 console.log和Logger.log似乎都无能为力。由于代码依赖于访问服务器端功能，因此我也不能只下载页面并在浏览器中打开它。有什么好方法吗？
供参考，以下是我的代码（不完整）：index.html
<!DOCTYPE html>
<html>
<head>
<base target="_self"/>
<Meta charset="utf-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<style>small {
color: grey;
}
body {
background-color: aliceblue;
}
div.container {
background-color: white;
}
input:invalid,select:invalid{
border-color: red;
}
input:valid,select:valid{
border-color: darkgreen;
}
</style>
</head>
<body>
<div class="container border rounded-lg mt-2 mb-2 pt-2 pb-2" style="max-width: 50rem;">
<div class="row">
<div class="col">
<h1 class="text-center">Bokning av informationskväll</h1>
<hr/>
<form id="bookingForm">
<div class="form-row">
<label class="form-group col">E-postadress<input type="email" class="form-control" name="email" required/></label>
<label class="form-group col">För- och efternamn<input type="text" class="form-control" name="fullName" required/></label>
</div>
<hr/>
<div class="form-row">
<label class="form-group col">Välj tilfälle<select class="form-control col required" name="eventId" id="timeSlotSelect" required></select></label>
<label class="form-group col">Antal personer <small>(inklusive dig själv)</small>
<select class="form-control col required" name="numVisitors" id="visitorSelect" required>
<option value="1" selected>Bara mig själv</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
</div>
<hr/>
<div class="form-row">
<button class="btn btn-primary btn-block" id="submitButton">Boka</button>
</div>
</form>
</div>
</div>
</div>
<script>
const form = document.forms['bookingForm'];
const submitButton = document.getElementById('submitButton');
let timeSlotSelect = document.getElementById('timeSlotSelect');
const visitorSelect = document.getElementById('visitorSelect');
const timeSlots = google.script.run.withFailureHandler(failurePopup).getAvailableTimeslots();
function populateTimeSlots(){
//let timeSlots = google.script.run.withSuccessHandler(successpopup).withFailureHandler(failurePopup).getAvailableTimeslots();
console.log(timeSlots);
alert(timeSlots.toString());
let option = document.createElement("OPTION");
timeSlotSelect.options.add(option);
option.value = "";
option.text = "Välj tillfälle...";
for (let timeSlot of timeSlots){
console.log(timeSlot);
let option = document.createElement("OPTION");
timeSlotSelect.options.add(option);
option.value = timeSlot.eventId;
option.text = timeSlot.eventTitle + " [" + timeSlot.bookedSlots + "/" + timeSlot.maxCapacity + "]";
if (timeSlot.availableSlots < 1){
option.disabled = true;
}
console.log(option);
}
}
function checkNumSlots(){
//let timeSlots = google.script.run.getAvailableTimeslots().withFailureHandler(failurePopup);
}
function successpopup(message){
alert("Success!\n "+message.toString();
console.log(message);
}
function failurePopup(error){
alert("Uh oh!\n "+error.toString());
console.log(error);
}
function submitBooking(){
//alert("Försöker skicka in bokning...");
let formFields = new FormData(form);
let timeStamp = new Date();
formFields.set("timeStamp",timeStamp);
google.script.run.withSuccessHandler(successpopup).withFailureHandler(failurePopup).bookTimeSlot(formFields);
form.reset();
}
form.addEventListener('submit',function(event){
event.preventDefault();
submitBooking();
});
window.addEventListener('load',populateTimeSlots);
</script>
</body>
</html> Code.gs
var scriptProp = PropertiesService.getScriptProperties();
var scriptLock = LockService.getScriptLock();
function initialSetup() {
const properties = {spreadsheetId: "1s0qVkY_zgISKfKckWJeg49fJVLxedF5eOVnCybbI1hw",dataSheetName: "bookingData",infoSheetName: "eventInfo"};
scriptProp.setProperties(properties);
const spreadSheet = SpreadsheetApp.openById(properties.spreadsheetId);
}
function doGet(){
var output = HtmlService.createTemplateFromFile('index').evaluate();
output.setTitle("Bokning av infokväll Hälsingegymnasiet");
return output;
}
function getAvailableTimeslots(){
Logger.log("Sidan frågar efter tillgängliga tillfällen...");
scriptLock.waitLock(30000);
try {
let events = [];
const id = scriptProp.getProperty('spreadsheetId');
const infoSheetName = scriptProp.getProperty('infoSheetName');
const ss = SpreadsheetApp.openById(id);
const eventSheet = ss.getSheetByName(infoSheetName);
//Logger.log(header);
const lastRow = eventSheet.getLastRow();
const lastColumn = eventSheet.getLastColumn();
const header = eventSheet.getRange(1,1,lastColumn).getValues()[0];
const data = eventSheet.getRange(2,lastRow-1,lastColumn).getValues();
for (var i=0; i < lastRow-1; i++){
let event = {};
for (var j=0; j < lastColumn-1; j++){
event[header[j]] = data[i][j];
//Logger.log(header[j]+" : "+range[i][j]);
}
//Logger.log(event);
events.push(event);
}
//Logger.log(events);
return events;
}catch(e){
Logger.log("Ett fel inträffade: "+e);
return e;
}
finally {
scriptLock.releaseLock()
}
}
function bookTimeslot(formData){
scriptLock.waitLock(30000);
try{
Logger.log("Inskickat formulär: "+formData);
const id = scriptProp.getProperty('spreadsheetId');
const dataSheetName = scriptProp.getProperty('dataSheetName');
const ss = SpreadsheetApp.openById(id);
const bookingSheet = ss.getSheetByName(dataSheetName);
const lastColumn = bookingSheet.getLastColumn();
const header = bookingSheet.getRange(1,lastColumn).getValues()[0];
}catch(e){
Logger.log("Ett fel inträffade: "+e);
return e;
}finally{
scriptLock.releaseLock();
}
}编辑：弄清楚了；原来是我的网络浏览器（Vivaldi）存在问题。改用Google Chrome，现在一切正常。考虑到两种浏览器都是基于Chromium的，这有点奇怪，但是很好。
解决方法
我发现了；事实证明，我的浏览器（Vivaldi）在HtmlService呈现内容的任何方法上都无法正常运行。我切换到Google Chrome浏览器，现在可以在开发控制台中获取输出了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
