สำหรับภาพรวมความสามารถของคอนโซล
สารบัญ
การพิมพ์ในคอนโซล
การป้อนข้อความไปยังคอนโซลพร้อมใช้งานจากทุกโมดูลและควบคุมผ่าน Tier() มี 3 คำสั่งเพิ่มเติม Msg() , DevMsg() และ Warning() ซึ่งรองรับเอาต์พุตสตริงที่จัดรูปแบบเช่น sprintf() :
DevMsg (char const* pMsg, ...) - เฉพาะในโหมดนักพัฒนาซอฟต์แวร์ Msg(char const* pMsg, ...) - เสมอ ข้อความสีขาว คำเตือน(char const *pMsg, ...) - เสมอ ข้อความสีแดง
สำหรับ ความเข้ากันได้แบบย้อนหลังคำสั่ง Con_Printf() และ Con_DPrintf() ถูกเก็บรักษาไว้จาก HL1
การดำเนินการตามคำสั่ง
เอ็นจิ้นใช้เซิร์ฟเวอร์และอินเทอร์เฟซไคลเอนต์เพื่อดำเนินการคำสั่ง (สตริง) เซิร์ฟเวอร์ใช้อินเทอร์เฟซ IVEngineServer::ServerCommand():
เครื่องยนต์ -> ServerCommand ("ระดับการเปลี่ยนแปลง de_dust\n");
ไคลเอนต์ใช้อินเทอร์เฟซ IVEngineClient และเลือกระหว่างสองคำสั่ง ซึ่งกำหนดว่าคำสั่งจะถูกดำเนินการก่อนบนไคลเอนต์หรือส่งโดยตรงไปยังเซิร์ฟเวอร์:
Engine->ServerCmd("ทักทาย\n"); //ส่งคำสั่งไปยังเซิร์ฟเวอร์
Engine->ClientCmd("ทักทาย\n"); // รันคำสั่งบนไคลเอนต์
การเพิ่มคำสั่งและตัวแปรใหม่
Developer Console คือระบบย่อยของ Source Engine ที่ให้สิทธิ์เข้าถึง โมดูลต่างๆซึ่งทำได้ผ่านอินเทอร์เฟซ ICvar (ดู \public\icvar.h) อินเทอร์เฟซนี้จะลงทะเบียนคำสั่งใหม่และค้นหาคำสั่งที่มีอยู่ อินเทอร์เฟซนี้สามารถเข้าถึงได้ผ่านตัวแปรโกลบอล CVAR ในโค้ดไคลเอ็นต์-เซิร์ฟเวอร์ (cv ในโค้ดเอ็นจิ้น) คำสั่งคอนโซลเป็นของคลาส ConCommand และตัวแปรคอนโซล ConVar ซึ่งทั้งคู่มาจาก คลาสพื้นฐาน ConCommandBase (ดู \public\convar.h)
การเพิ่มคำสั่งและตัวแปรใหม่นั้นค่อนข้างง่ายและสามารถใช้ได้กับทั้งโมดูลเซิร์ฟเวอร์และไคลเอนต์ (เหมือนกันสำหรับกลไกทั้งหมด) ตัวสร้างคลาสเหล่านี้จะลงทะเบียนโดยอัตโนมัติ ทีมใหม่/ตัวแปรในระบบคอนโซล นี้ ตัวอย่างสั้น ๆรหัสเพิ่มคำสั่งใหม่ my_function และตัวแปรใหม่ my_variable เริ่มต้นเป็น 42:
#รวม
นี้ การใช้งานปกติเมื่อชื่อของอ็อบเจ็กต์และคำสั่งเหมือนกัน และใช้ตัวแปรในซอร์สโค้ดเดียวเท่านั้น ตัวแปรจะอธิบายว่าเป็นแบบคงที่
การใช้คลาส ConVar
ก่อนอื่น มาดู ConVar ConVar Constructor ที่ใช้กันมากที่สุด:
ConVar (ถ่าน const *pName, ถ่าน const *pDefaultValue, แฟล็ก int, ถ่าน const *pHelpString)
อาร์กิวเมนต์แรก pName คือชื่อของตัวแปร (ไม่มีการเว้นวรรค) อาร์กิวเมนต์ถัดไป pDefaultValue จะเป็นสตริงเสมอแม้สำหรับ ConVar "s ด้วย ค่าตัวเลข- แฟล็กกำหนดคุณสมบัติพิเศษของตัวแปร คำอธิบายแฟล็กทั้งหมดเริ่มต้นด้วย FCVAR_* แต่จะเพิ่มเติมในภายหลัง เป็นความคิดที่ดีที่จะใช้ pHelpString เพื่อให้ผู้ใช้สามารถเข้าใจว่าตัวแปรมีไว้เพื่ออะไร ConVars ไม่ได้จำกัดอยู่เพียงประเภทใดประเภทหนึ่ง ค่าอาจเป็นจำนวนเต็ม จำนวนจริง หรือสตริง และคุณสามารถใช้มันได้ตามต้องการ ตราบใดที่คุณมีวัตถุ ConVar หรือมีตัวชี้อยู่ คุณสามารถดูและเปลี่ยนค่าได้โดยตรง ตัวอย่างทั้งหมดเหล่านี้ถูกต้องและจะให้ผลลัพธ์เดียวกัน:
ถ้า (my_variable.GetInt() == 42) DoSomething(); ถ้า (my_variable.GetFloat() == 42.0f) ทำอะไรสักอย่าง(); ถ้า (strcmp(my_variable.GetString(), "42")==0) ทำอะไรสักอย่าง();
ในการตั้งค่า ConVar คุณต้องใช้ฟังก์ชัน SetValue() โดยใช้ประเภทข้อมูลใดก็ได้:
My_variable.SetValue(42); my_variable.SetValue(42.0f); my_variable.SetValue("42");
คุณสามารถรีเซ็ตค่า ] กลับเป็นค่าเริ่มต้นได้ตลอดเวลาโดยใช้ฟังก์ชัน Reverse()
หาก ConVar ถูกสร้างขึ้นใน โมดูลที่แตกต่างกันจากนั้นในอินเทอร์เฟซ ICvar ฟังก์ชัน FindVar() จะถูกนำมาใช้เพื่อรับตัวชี้ไปยังวัตถุหากมีการตั้งชื่อตัวแปร นี่คือตัวอย่างง่ายๆ ที่ตรวจสอบว่า ConVar sv_cheats ที่กำหนดในโมดูลเครื่องยนต์ได้รับการติดตั้งหรือไม่:
ConVar *pCheats = cvar->FindVar("sv_cheats"); ถ้า (pCheats && pCheats->GetInt() == 1) AllowCheating();
ช่วงของค่าที่ถูกต้องสามารถกำหนดได้สำหรับ ConVars ที่เป็นตัวเลขโดยใช้ตัวสร้างอื่น จากนั้นระบบคอนโซลจะตรวจสอบ ConVar โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงด้วยตนเอง หากตัวเลขที่ป้อนอยู่นอกช่วง ระบบจะปัดเศษเป็นค่าที่ถูกต้องถัดไป การตั้งค่าช่วงของค่าที่ถูกต้องตั้งแต่ 1 ถึง 100:
ConVar my_variable("my_variable", "42", 0, "helptext", จริง, 1, จริง, 100);
บางครั้งคุณต้องการรับการแจ้งเตือนเมื่อผู้ใช้หรือระบบย่อยอื่นเปลี่ยนค่าของ ConVar ของคุณ เพื่อให้สามารถตั้งค่าฟังก์ชันการโทรกลับได้:
โมฆะคงที่ OnChangeMyVariable (ConVar *var, char const *pOldString) ( DevMsg("ConVar %s ถูกเปลี่ยนจาก %s เป็น %s\n", var->GetName(), pOldString, var->GetString()); ) ConVar my_variable("my_variable", "42", 0, "หมายเลขโปรดของฉัน", OnChangeMyVariable);
การใช้คลาส ConCommand
Class ConCommand นั้นง่ายกว่า ConVar และมีตัวสร้างเพียงตัวเดียว:
ConCommand (ถ่าน const * pName, โทรกลับ FnCommandCallback, ถ่าน const * pHelpString = 0, int flags = 0, FnCommandCompletionCallback allowanceFunc = 0);
เช่นเดียวกับ ConVar pName ระบุชื่อของคำสั่ง (ไม่ต้องเว้นวรรค!) callback เป็นฟังก์ชันที่ดำเนินการเมื่อผู้ใช้รันคำสั่งนี้ pHelpString และแฟล็กมีฟังก์ชันเหมือนกับใน ConVar ConCommands รองรับการเติมข้อความอัตโนมัติสำหรับพารามิเตอร์แรก โดยเฉพาะเมื่อใช้สำหรับการประมวลผลไฟล์ ตัวอย่างเช่น คุณใช้คำสั่ง loadtext lt;textfilegt ; ซึ่งถือว่าไฟล์ .txt เป็นอินพุต คอนโซลจะค้นหาไฟล์ .txt ที่มีอยู่ทั้งหมด และอนุญาตให้ผู้ใช้เลือกหนึ่งไฟล์จากรายการ หากถูกต้อง completeFunc ผ่าน ระบบจะเรียกทุกครั้งที่ระบบคอนโซลต้องการรายการอาร์กิวเมนต์ที่มีอยู่
เมื่อดำเนินการฟังก์ชันโทรกลับ พารามิเตอร์จะป้อนลงในคอนโซล ไม่จัดทำเป็นอาร์กิวเมนต์ของฟังก์ชัน ฟังก์ชันการโทรกลับจำเป็นต้องถามกลไกว่าได้รับอาร์กิวเมนต์จำนวนเท่าใดโดยใช้ฟังก์ชันอินเทอร์เฟซกลไก Cmd_Argc() จากนั้นคุณสามารถรับข้อโต้แย้งแต่ละรายการได้โดยใช้ Cmd_Argv(index) โดยที่ดัชนี 1 เป็นอาร์กิวเมนต์แรก อาร์กิวเมนต์จะถูกส่งกลับเป็นสตริงเสมอ
เป็นโมฆะ MySay_f (เป็นโมฆะ) ( ถ้า (เครื่องยนต์ -> Cmd_Argc ()< 1)
{
Msg(""Usage: my_say
นี่คือตัวอย่างวิธีสร้างรายการเติมข้อความอัตโนมัติอย่างง่าย ที่นี่ไม่ได้ใช้พารามิเตอร์ที่ไม่สมบูรณ์ มันมีอักขระที่ป้อนเมื่อนานมาแล้ว (รวมถึงชื่อคำสั่งด้วย):
int แบบคงที่ MySayAutoComplete (ถ่าน const *บางส่วน, คำสั่งถ่าน[ COMMAND_COMPLETION_MAXITEinMS ][ COMMAND_COMPLETION_ITEM_LENGTH ]) ( strcpy(commands, "hello"); strcpy(commands, "goodbye"); return 2; // จำนวนรายการ ) ConCommand my_say(" my_say", MySay_f, "พูดอะไรสักอย่าง", 0, MySayAutoComplete);
FCVAR_ธง
คำสั่งคอนโซล/ตัวแปรใช้แฟล็กที่มีคุณสมบัติบางอย่างและต้องได้รับการจัดการด้วยความระมัดระวัง คอนสตรัคเตอร์ใช้แฟล็กเหล่านี้และสามารถเปลี่ยนแปลงได้โดยใช้ ConCommandBase::AddFlags() (ไม่ได้ใช้บ่อยนัก) ไม่สามารถเปลี่ยนแฟล็กเหล่านี้ได้นอกจากใน ซอร์สโค้ดเพื่อหลีกเลี่ยงการโกง แฟล็กบางตัวต้องตั้งค่าด้วยตนเอง ส่วนแฟล็กบางตัวจะถูกตั้งค่าโดยอัตโนมัติโดยระบบคอนโซล:
FCVAR_LAUNCHER, FCVAR_GAMEDLL, FCVAR_CLIENTDLL, FCVAR_MATERIAL_SYSTEM, FCVAR_STUDIORENDER
ธงเหล่านี้ได้รับการตั้งค่าในระหว่างขั้นตอนการลงทะเบียนและชี้ไปที่โมดูลที่สร้างคำสั่ง (คุณไม่จำเป็นต้องตั้งค่า) ต้องตั้งค่าสถานะต่อไปนี้ด้วยตนเอง:
| FCVAR_CHEAT |
| ใช้สำหรับการดีบักและไม่ได้ถูกลบออกจากรุ่นเนื่องจากข้อเท็จจริงที่ว่านักพัฒนา mod และแผนที่อาจต้องการสิ่งเหล่านี้ ขออภัย เราไม่สามารถอนุญาตให้ผู้เล่นทั่วไปใช้เครื่องมือแก้ไขข้อบกพร่องเหล่านี้ได้ เนื่องจากจะไม่ยุติธรรมกับผู้เล่นคนอื่นๆ (การโกง) กฎที่ดีเพิ่ม FCVAR_CHEAT ที่จุดเริ่มต้นให้กับคำสั่งคอนโซลใหม่ทั้งหมดที่คุณเพิ่ม เว้นแต่ว่านี่เป็นตัวเลือกสุดท้ายและถูกกฎหมายสำหรับผู้เล่น ประสบการณ์แสดงให้เห็นว่าแม้แต่คำสั่งดีบักที่อ่อนโยนที่สุดก็สามารถนำมาใช้เป็นการโกงไม่ทางใดก็ทางหนึ่ง เซิร์ฟเวอร์เกมโดยการตั้งค่า sv_cheats จะตัดสินใจว่าจะอนุญาตให้ใช้สูตรโกงหรือไม่ หากไคลเอนต์เชื่อมต่อกับเซิร์ฟเวอร์ที่ปิดใช้งานสูตรโกง (ควรเป็นค่าเริ่มต้น) ตัวแปรคอนโซลไคลเอนต์ทั้งหมดที่ทำเครื่องหมายว่า FCVAR_CHEAT จะถูกส่งกลับเป็นค่าเริ่มต้นและไม่สามารถเปลี่ยนแปลงได้ตราบใดที่ไคลเอนต์ยังคงเชื่อมต่ออยู่ คำสั่งคอนโซลที่ทำเครื่องหมายว่า FCVAR_CHEAT ไม่สามารถดำเนินการได้เช่นกัน |
| FCVAR_USERINFO |
| ตัวแปรคอนโซลบางตัวมีข้อมูลไคลเอ็นต์ที่เซิร์ฟเวอร์จำเป็นต้องทราบ เช่น ชื่อผู้ใช้หรือการตั้งค่าชื่อผู้ใช้ ตัวแปรเหล่านี้จะต้องถูกทำเครื่องหมายด้วยแฟล็ก FCVAR_USERINFO จากนั้นตัวแปรเหล่านี้จะถูกส่งไปยังเซิร์ฟเวอร์และอัปเดตทุกครั้งที่ผู้ใช้เปลี่ยนแปลง เมื่อผู้ใช้เปลี่ยนตัวแปรเหล่านี้ กลไกจะแจ้งรหัสเซิร์ฟเวอร์โดยใช้ ClientSettingsChanged() เซิร์ฟเวอร์สามารถร้องขอกลไกแต่ละรายการได้ การตั้งค่าไคลเอ็นต์ใช้ GetClientConVarValue() |
| FCVAR_REPLICATED |
| การใช้เซิร์ฟเวอร์เกมและไคลเอนต์ รหัสทั่วไปดังนั้นจึงเป็นเรื่องสำคัญที่ทั้งสองฝ่ายจะต้องปฏิบัติตามเส้นทางเดียวกันโดยใช้ข้อมูลเดียวกัน (เช่น การทำนายการเคลื่อนไหว/อาวุธ กฎของเกม) หากโค้ดนี้ใช้ตัวแปรคอนโซล จะต้องมี ค่าเดียวกันทั้งสองด้าน. การตั้งค่าสถานะ FCVAR_REPLICATED ช่วยให้มั่นใจได้ว่าค่าจะถูกส่งไปยังไคลเอนต์ทั้งหมด ในขณะที่เชื่อมต่อ ลูกค้าจะไม่สามารถเปลี่ยนค่าเหล่านี้ได้เนื่องจากจะใช้ค่าเซิร์ฟเวอร์ |
| FCVAR_ARCHIVE |
| ตัวแปรคอนโซลบางตัวประกอบด้วย การตั้งค่าที่กำหนดเองเราต้องการคืนค่าทุกครั้งที่เปิดตัวเกม (เป็นชื่อหรือ network_rate) หากตัวแปรคอนโซลถูกทำเครื่องหมายว่า FCVAR_ARCHIVE ตัวแปรนั้นจะถูกบันทึกลงในไฟล์ config.cfg เมื่อเกมจบลง และจะถูกโหลดในครั้งถัดไปที่เปิดตัว (นอกจากนี้คำสั่ง host_writeconfig จะบันทึกค่า FCVAR_ARCHIVE ทั้งหมดลงในไฟล์) |
| FCVAR_แจ้งเตือน |
| หากตัวแปรคอนโซลถูกทำเครื่องหมาย FCVAR_NOTIFY เซิร์ฟเวอร์จะส่งข้อความไปยังไคลเอ็นต์ทั้งหมดทุกครั้งที่มีการเปลี่ยนแปลงตัวแปร สิ่งนี้ควรใช้กับตัวแปรที่เปลี่ยนแปลงเกมซึ่งมีความสำคัญต่อผู้เล่นทุกคน (เช่น mp_Friendlyfire) |
| FCVAR_ป้องกัน |
| นี่คือตัวแปรคอนโซลที่มี ข้อมูลส่วนตัว(เช่นรหัสผ่าน) เราไม่ต้องการให้ผู้ใช้รายอื่นมองเห็นได้ เมื่อต้องการทำเช่นนี้ ต้องตั้งค่าสถานะ FCVAR_PROTECTED เพื่อทำเครื่องหมายข้อมูลนี้ว่าเป็นความลับ |
| FCVAR_SPONLY |
| บางครั้งการรันคำสั่งหรือการเปลี่ยนแปลงตัวแปรอาจถูกต้องในโหมดผู้ใช้คนเดียวเท่านั้น จากนั้นทำเครื่องหมายคำสั่งเป็น FCVAR_SPONLY |
| FCVAR_PRINTABLEเท่านั้น |
| ตัวแปรที่สำคัญบางตัวมีน้ำหนักมากหรือมีการออกอากาศ (เช่น กฎของเกม) และสิ่งสำคัญคือต้องมีเฉพาะอักขระที่สามารถพิมพ์ได้ (เช่น ไม่มีอักขระควบคุม) |
| FCVAR_NEVER_AS_STRING |
| แฟล็กนี้จะบอกเอ็นจิ้นไม่ให้เอาท์พุตตัวแปรนี้เป็นสตริง เนื่องจากมีลำดับของอักขระควบคุม |
| FCVAR_DEMO |
| เมื่อคุณเริ่มบันทึกไฟล์สาธิต จะต้องเพิ่มตัวแปรคอนโซลบางตัวลงในการบันทึกเพื่อให้แน่ใจว่าจะเล่นได้อย่างถูกต้อง |
| FCVAR_DONTRECORD |
| สิ่งนี้ตรงกันข้ามกับ FCVAR_DEMO ตัวแปรคอนโซลบางตัวไม่ควรเขียนลงในไฟล์สาธิต |
สวัสดี, เพื่อนรัก- แผงนักพัฒนาซอฟต์แวร์ (คอนโซล) ในเบราว์เซอร์คือ เครื่องมือที่ขาดไม่ได้สำหรับเจ้าของเว็บไซต์ทุกคนซึ่งคุณสามารถดูได้อย่างรวดเร็ว รหัสเอชทีเอ็มหน้าและ สไตล์ CSS- คุณยังสามารถค้นหาข้อผิดพลาดที่เกิดขึ้นเมื่อโหลดไซต์และตรวจสอบความสามารถในการปรับตัวของไซต์ได้
วันนี้เราจะพิจารณาการทำงานกับโค้ด html, สไตล์ CSS และความสามารถในการปรับเปลี่ยนในแผงนักพัฒนาซอฟต์แวร์ สิ่งเหล่านี้เป็นเครื่องมือที่จำเป็นในการแก้ปัญหาส่วนใหญ่
สำหรับ ความเข้าใจร่วมกันฉันขอยกตัวอย่างว่าเมื่อใดคุณอาจต้องการแผงนักพัฒนาซอฟต์แวร์
สมมติว่าคุณมาที่บล็อกของฉันและสนใจว่าฉันใช้แบบอักษรหรือสีอะไร และอื่นๆ โดยทั่วไปนี่อาจเป็นองค์ประกอบใดก็ได้บนไซต์ และคุณต้องการทำเช่นเดียวกันบนเว็บไซต์ของคุณ
จากนั้นให้คุณดูแผงนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์เพื่อดูองค์ประกอบที่ต้องการ ซึ่งคุณสามารถดูโค้ด html และสไตล์ css ได้
อีกทางเลือกหนึ่งสำหรับการใช้แผงควบคุมคือเมื่อคุณต้องการทำอะไรบางอย่างบนไซต์ แต่ยังไม่รู้ว่าจะมีลักษณะอย่างไร
ในกรณีนี้ คุณยังสามารถใช้แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์และดูว่าแนวคิดของคุณจะมีลักษณะอย่างไรในเบราว์เซอร์ ท้ายที่สุดแล้ว ทุกสิ่งที่คุณทำในแผงนักพัฒนาซอฟต์แวร์จะปรากฏให้คุณเห็นเท่านั้น และเพื่อให้ผู้เยี่ยมชมเห็นการทดลองของคุณ คุณจะต้องถ่ายโอนสไตล์และโค้ดไปยังไฟล์ของไซต์
การเปิดแผงผู้ดูแลเว็บและทำความคุ้นเคยกับอินเทอร์เฟซ
แผงนักพัฒนามีอยู่ในทุก ๆ เบราว์เซอร์ที่ทันสมัย- ในการเปิด คุณต้องกดปุ่ม F12 บนแป้นพิมพ์
อินเทอร์เฟซของแผงใน เบราว์เซอร์ที่แตกต่างกันจะแตกต่างแต่หลักการทำงานจะคล้ายกัน
ฉันชอบพาเนลในเบราว์เซอร์ Firefox
แผงแบ่งออกเป็นสองส่วนและมีแท็บและเครื่องมือสำหรับการทำงาน
ในแผงควบคุม คุณสามารถดูโค้ด HTML ของเพจและแก้ไขได้จากตรงนั้น ในการดำเนินการนี้ ให้เลือกองค์ประกอบที่ต้องการแล้วกด ปุ่มขวาเมาส์และเลือกจากเมนู “แก้ไขเป็น.HTML (แก้ไขเช่นHTML)".
หากต้องการทำงานกับสไตล์ คุณต้องไปที่ส่วนของแผง CSS ซึ่งคุณสามารถเพิ่มสไตล์หรือปิดการใช้งานสไตล์ที่มีอยู่ได้โดยลบช่องทำเครื่องหมายที่อยู่ด้านข้างออก ทุกสิ่งสามารถเปลี่ยนแปลงได้
ที่นี่คุณจะพบว่าไฟล์สไตล์ใดอยู่ในไฟล์ใดและอยู่ในบรรทัดใด
วิธีวิเคราะห์องค์ประกอบ html บนเว็บไซต์และค้นหาสไตล์ css ขององค์ประกอบ
ลองดูตัวอย่างของฉันซึ่งอยู่ในแต่ละบทความ
ในการวิเคราะห์องค์ประกอบที่ต้องการ คุณต้องคลิกขวาที่องค์ประกอบนั้นแล้วเลือกรายการเมนู .
หลักการทั้งหมดในการทำงานกับโค้ดในพาเนลคือคุณต้องเลือกโค้ด html ในหน้าต่างด้านซ้ายและทางด้านขวาจะมีลักษณะสำหรับองค์ประกอบนี้
และถ้าสไตล์ทุกอย่างค่อนข้างเรียบง่ายเมื่อทำงานกับโค้ด html คุณต้องเข้าใจความสมบูรณ์ของมัน นั่นคือแต่ละองค์ประกอบจะมีแท็กอยู่ สิ่งเหล่านี้อาจเป็นย่อหน้า ลิงก์ รูปภาพ และอื่นๆ ส่วนใหญ่มักเป็นบล็อก DIV ที่มีแท็กเปิด < กอง>และปิด กอง>- และทั้งหมดนี้มองเห็นได้ชัดเจนในแผงควบคุม
เมื่อคัดลอกหรือแก้ไข สิ่งสำคัญคือต้องเข้าใจว่าบล็อกเริ่มต้นที่ใดและสิ้นสุดที่ใด การทำผิดพลาดแม้แต่น้อยอาจทำให้เลย์เอาต์ทั้งหมดของเทมเพลตเสียหายได้
ในวิดีโอสอน ฉันจะลงรายละเอียดในประเด็นนี้ และถ้าคุณต้องการที่จะเชี่ยวชาญอย่างรวดเร็ว ความรู้พื้นฐานสำหรับ html และ css ฉันแนะนำให้คุณไปที่หน้า "ฟรี"และดาวน์โหลดหลักสูตรโดย Evgeniy Popov
วิธีคัดลอกโค้ด html จากพาเนลไปยังไฟล์ไซต์
มีแนวคิดมากมายในการใช้แผงนักพัฒนาซอฟต์แวร์ หลังจากการทดลองในแผงแล้วจะต้องโอนผลลัพธ์ไปยังไฟล์ไซต์ และมีปัญหาบางอย่างที่นี่ ความจริงก็คือแผงควบคุมแสดงโค้ด html และไซต์ที่ทันสมัยส่วนใหญ่รวมถึงไซต์บนแพลตฟอร์ม WordPress นั้นถูกสร้างขึ้นโดยใช้ภาษา การเขียนโปรแกรม PHP- และนี่ก็เหมือนสวรรค์และโลก
ลองดูตัวอย่างการคัดลอกแบนเนอร์จากบล็อกของฉันและโอนไปยังไซต์อื่น
ในการดำเนินการนี้ คุณต้องเปิดแผงนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบองค์ประกอบที่ต้องการ เมื่อพิจารณาจุดเริ่มต้นของบล็อก DIV แล้ว ให้กดปุ่มขวาของสายตาด้านหน้าแล้วเลือกรายการเมนู “คัดลอกภายนอกHTML"
โค้ดถูกคัดลอกไปยังคลิปบอร์ดแล้ว และตอนนี้คุณต้องวางโค้ดในตำแหน่งที่คุณต้องการเห็นแบนเนอร์นี้
กระบวนการนี้ค่อนข้างอธิบายได้ยาก ดังนั้นฉันขอแนะนำให้ดูวิดีโอบทช่วยสอนที่มีการอธิบายและแสดงทุกอย่างอย่างละเอียด
วิธีถ่ายโอนสไตล์จากแผงนักพัฒนาซอฟต์แวร์ไปยังไฟล์ไซต์
เมื่อคุณตัดสินใจเกี่ยวกับโค้ดและสไตล์แล้ว คุณสามารถเริ่มถ่ายโอนไปยังไฟล์ของไซต์ได้ เนื่องจากขณะนี้การเปลี่ยนแปลงเหล่านี้ทั้งหมดจะปรากฏให้คุณเห็นในเบราว์เซอร์เท่านั้น และหากคุณรีเฟรชหน้าเว็บ การเปลี่ยนแปลงทั้งหมดจะหายไป
สำหรับฉันมันสะดวกกว่า เนื่องจากเมื่อทำงานใน Notepad++ มีการเน้นโค้ดและกำหนดหมายเลขบรรทัด และสิ่งนี้ช่วยได้มากเมื่อคุณไม่เพียงแค่ต้องคัดลอกสไตล์ แต่ต้องเปลี่ยนแปลงสไตล์ที่มีอยู่ด้วย สไตล์เหล่านี้หาได้ง่ายตามหมายเลขบรรทัด
วิธีตรวจสอบการตอบสนองของเทมเพลตในแผงนักพัฒนาซอฟต์แวร์
หากต้องการเปลี่ยนแผงเป็นโหมดปรับเปลี่ยน คุณต้องกดคีย์ผสม CTRL+SHIFT+M หรือปุ่มในแผงนักพัฒนาซอฟต์แวร์ ซึ่งจะแตกต่างกันไปในเบราว์เซอร์ต่างๆ
บทสรุป
ในบทความนี้ ฉันไม่ได้ดูเครื่องมือทั้งหมดของแผงนักพัฒนาซอฟต์แวร์ แต่เฉพาะเครื่องมือที่มีประโยชน์และผู้ดูแลเว็บจำนวนมากใช้บ่อยที่สุด
การใช้แผงควบคุมและทักษะในการทำงานกับโค้ดและสไตล์เป็นสิ่งที่ขาดไม่ได้เมื่อทำงานกับเว็บไซต์และโปรแกรมพันธมิตร
นำเครื่องมือไปใช้บริการมันจะมีประโยชน์กับคุณอีกหลายครั้ง
หากคุณมีคำถามใด ๆ ฉันยินดีที่จะตอบพวกเขาในความคิดเห็น
เพื่อนฉันขอให้คุณประสบความสำเร็จ พบกันในบทความใหม่
ขอแสดงความนับถือ Maxim Zaitsev
แต่ละเบราว์เซอร์มีของตัวเอง เครื่องมือสำหรับนักพัฒนาเป็นสิ่งที่หลายๆ คนเรียกง่ายๆ ว่า "คอนโซล" ลองพิจารณาคอนโซลเข้าไปด้วย เบราว์เซอร์ Chrome- ดูเหมือนว่านี้:
ที่จริงแล้ว คอนโซลในเบราว์เซอร์ Chrome เป็นเครื่องมือที่คุณไม่เพียงแต่สามารถดูเนื้อหาของหน้าเว็บที่แสดงโดยเบราว์เซอร์เท่านั้น แต่ยังรวมถึง ข้อผิดพลาดที่มีอยู่(ซึ่งเป็นสิ่งที่ผู้ทดสอบมักทำ) แต่ก็ง่ายกว่าและเร็วกว่ามากในการแก้ไขข้อผิดพลาดเหล่านี้ (ซึ่งเป็นสิ่งที่นักพัฒนามักทำบ่อยที่สุด) วัดตัวบ่งชี้ต่างๆ และจัดการหน้า
วิธีเปิดคอนโซลในเบราว์เซอร์ Chrome:
- ปุ่ม F12;
- กดพร้อมกัน ปุ่ม Ctrl+ กะ + ฉัน;
— RMB บนองค์ประกอบของหน้า -> ดูโค้ด;
- เมนูเบราว์เซอร์ -> เครื่องมือเพิ่มเติม-> เครื่องมือสำหรับนักพัฒนา
จะอยู่ที่ด้านล่างของหน้าหรือด้านข้าง หรือจะเลิกปักหมุดในหน้าต่างอื่นก็ได้ มาดูแต่ละแท็บของคอนโซลแบบเปิดแยกกัน
โดยรวมแล้วมี 8 แท็บ ซึ่งแต่ละแท็บจะแสดงข้อมูลบางอย่าง:
1 – องค์ประกอบ(ประกอบด้วยโค้ด html/css ทั้งหมดของหน้า และให้คุณเลือกองค์ประกอบเพื่อการวิจัย รวมถึงแก้ไขได้)
2 – คอนโซล(แสดงการมีอยู่/ไม่มีข้อผิดพลาด/คำเตือนในโค้ด)
3 – แหล่งที่มา(อนุญาตให้คุณดำเนินการกับโค้ดเพจ)
4 – เครือข่าย(ติดตามเวลาดำเนินการ คำขอบางอย่างและการร้องขอนั้นเอง)
5 – เส้นเวลา(วัดเวลาในการโหลดหน้า)
6 – โปรไฟล์(อนุญาตให้คุณสร้าง JavaScript, โปรไฟล์ CPU)
7 – ทรัพยากร (ช่วยให้คุณสามารถดูข้อมูลที่บันทึกไว้บางส่วนได้)
8 – การตรวจสอบ(ตรวจสอบพารามิเตอร์บางอย่าง)
ตอนนี้เรามาดูแต่ละรายการแยกกันและรายละเอียดเพิ่มเติม:
แผงหน้าปัด องค์ประกอบ
แผงองค์ประกอบจะแสดงเค้าโครงหน้าเหมือนกับที่จะแสดงผลในเบราว์เซอร์ทุกประการ คุณสามารถเปลี่ยนเนื้อหาของไซต์ด้วยสายตาได้โดยการเปลี่ยนโค้ด html/css ในแผงองค์ประกอบ ดังที่คุณอาจสังเกตเห็น (หรืออาจจะไม่) หน้าต่างด้านซ้ายจะแสดงเอกสาร html และหน้าต่างด้านขวาจะแสดง CSS ด้วยการดำเนินการจัดการข้อมูลอย่างง่าย คุณสามารถเปลี่ยนเนื้อหาและการออกแบบของเพจที่เปิดอยู่ได้ ตัวอย่างเช่น คุณสามารถเปลี่ยนข้อความในหน้าต่างได้หากคุณแก้ไขในส่วนเนื้อหา html และเปลี่ยนแบบอักษรของหน้าด้วยการเปลี่ยนค่าในช่อง css แต่สิ่งนี้จะไม่บันทึกข้อมูลที่ป้อน แต่จะช่วยประเมินการเปลี่ยนแปลงที่นำไปใช้ด้วยสายตา นอกจากนี้ คุณสามารถดูโค้ดขององค์ประกอบของหน้าเฉพาะได้ โดยคลิกขวาที่มันแล้วเลือกคำสั่ง "ดูโค้ด"
แผงองค์ประกอบมีคุณสมบัติที่ยอดเยี่ยมอย่างหนึ่ง คุณสามารถดูได้ว่ามันจะมีลักษณะอย่างไร เปิดหน้าบนอุปกรณ์บางเครื่องที่มีส่วนขยายหน้าจออื่น เมื่อคลิกที่ไอคอนโทรศัพท์ทางด้านซ้ายของแท็บองค์ประกอบ หน้าต่างจะถูกเรียกขึ้นมาซึ่งคุณสามารถเปลี่ยนขนาดของหน้าจอที่ต้องการได้ ซึ่งเป็นการจำลองอุปกรณ์เฉพาะและควบคุมการแสดงผลของหน้าเว็บนั้น ดูเหมือนว่านี้:
เมื่อคุณคลิกที่ปุ่มเลือกรุ่น เมนูแบบเลื่อนลงจะปรากฏขึ้นพร้อมกับ มีให้เลือกมากมายอุปกรณ์ เลือกสิ่งที่คุณต้องการ - และ voila! หน้าจะแสดงราวกับว่าเป็นอุปกรณ์ ด้วยวิธีนี้ แผงองค์ประกอบสามารถใช้งานได้ไม่เพียงแต่เพื่อดูหรือแก้ไขเพจ แต่ยังเพื่อจำลองอุปกรณ์แสดงผลอีกด้วย ทุกอย่างเป็นหนึ่งเดียวและพร้อมใช้งานใน Chrome!
แผงหน้าปัด คอนโซล
แท็บยอดนิยมสำหรับผู้ทดสอบ เนื่องจากนี่คือจุดที่เราเห็นข้อผิดพลาดที่พบในโค้ดเมื่อรันสคริปต์ แผงนี้ยังแสดงคำเตือนและคำแนะนำประเภทต่างๆ (ดังภาพด้านบน) ข้อความทั้งหมดที่แสดงในแท็บสามารถกรองได้ ข้อผิดพลาดยังแสดงตำแหน่งของมันด้วย และเมื่อคลิกที่ข้อผิดพลาด คุณจะถูกนำไปที่แท็บแหล่งที่มา ซึ่งข้อผิดพลาดจะปรากฏในการออกแบบทั่วไปของเพจ
คุณสามารถล้างฟิลด์แท็บคอนโซล (ในกรณีที่คุณต้องการลบข้อความเกี่ยวกับข้อผิดพลาดก่อนหน้า) โดยคลิกที่ไอคอนวงกลมที่ขีดฆ่า คุณสามารถกรองข้อความในคอนโซลตามประเภท - ข้อผิดพลาด คำเตือน ข้อมูล เอาต์พุตมาตรฐาน, ข้อความดีบักเกอร์, แก้ไข - โดยการเลือกอย่างใดอย่างหนึ่ง ตัวเลือกที่ใช้ได้คอนโซล
แผงหน้าปัด แหล่งที่มา
ตามกฎแล้ว แท็บนี้เป็นที่ที่โปรแกรมเมอร์ทำการดีบักโค้ด มีหน้าต่าง 3 บาน (จากซ้ายไปขวา):
- โซน ไฟล์ต้นฉบับ- ประกอบด้วยไฟล์ทั้งหมดที่เชื่อมต่อกับเพจ รวมถึง JS/CSS
- พื้นที่ข้อความ มันมีข้อความของไฟล์
- ข้อมูลและโซนควบคุม
ในพื้นที่ไฟล์ต้นฉบับ ให้เลือก องค์ประกอบที่จำเป็นในโซนข้อความจะมีการดีบั๊กโดยตรง และในโซนข้อมูลและการควบคุม คุณสามารถเริ่ม/หยุดโค้ดที่ดีบั๊กได้
แผงหน้าปัด เครือข่าย
หน้าที่หลักของแท็บนี้คือการบันทึกบันทึกเครือข่าย ให้การมองเห็นทรัพยากรที่มีการร้องขอและโหลดแบบเรียลไทม์ คุณสามารถระบุทรัพยากรที่กำลังโหลดและประมวลผลได้ ปริมาณมากเวลาเพื่อที่จะทราบในภายหลังว่าสามารถเพิ่มประสิทธิภาพเพจได้ที่ไหนและด้วยวิธีใด
เป็นที่น่าสังเกตว่ามันอยู่ในแท็บนี้ด้วย โหมดขนาดใหญ่แถวคำขอ คุณสามารถดูคำขอที่ส่งไปยังเซิร์ฟเวอร์ตลอดจนการตอบกลับที่มาจากเซิร์ฟเวอร์ เนื้อหา และลักษณะเฉพาะ
แผงประสิทธิภาพ
แท็บนี้จะใช้หากจำเป็น รีวิวฉบับเต็มใช้เวลา. ใช้จ่ายไปกับอะไร จำเป็นสำหรับกระบวนการนี้หรือกระบวนการนั้นมากน้อยเพียงใด กิจกรรมทั้งหมดจะแสดงที่นี่ รวมถึงการโหลดทรัพยากรและการใช้งาน Javascript
แผงนี้ทำให้สามารถจัดโปรไฟล์เวลาดำเนินการและการใช้หน่วยความจำของเว็บแอปพลิเคชันหรือเพจได้ จึงช่วยให้เข้าใจว่ามีการใช้ทรัพยากรจำนวนมากไปที่ใด และโค้ดสามารถปรับให้เหมาะสมได้อย่างไร
ซีพียูผู้สร้างโปรไฟล์ให้ข้อมูลเกี่ยวกับเวลาที่ใช้ในการรัน Javascript
ฮีปโปรไฟล์แสดงการจัดสรรหน่วยความจำ
โปรไฟล์จาวาสคริปต์รายละเอียดว่าเวลาที่ใช้ในการรันสคริปต์เป็นอย่างไร
ออกแบบมาเพื่อตรวจสอบองค์ประกอบที่โหลด ช่วยให้คุณสามารถโต้ตอบกับฐานข้อมูล HTML5, พื้นที่จัดเก็บในเครื่อง, คุกกี้, AppCache ฯลฯ ในแท็บนี้ คุณสามารถล้างคุกกี้ได้โดยเปิดแท็บนี้แล้วคลิกไอคอนวงกลมที่ขีดฆ่า
แผงหน้าปัด การตรวจสอบ
แผงนี้ทำหน้าที่เป็นตัววิเคราะห์เพจในขณะที่กำลังโหลด จากการตรวจสอบ คำแนะนำดูเหมือนจะเพิ่มประสิทธิภาพการโหลดหน้าเว็บและเพิ่มความเร็วในการตอบสนอง ตัวอย่างของวิธีการปรับให้เหมาะสมสามารถดูได้ในหน้าต่างด้านล่าง
แผงความปลอดภัย
แผงความปลอดภัยจะแสดงข้อมูลเกี่ยวกับคำขอแต่ละรายการและเน้นคำขอเหล่านั้นเนื่องจากไซต์ไม่ได้รับไอคอนสีเขียวที่เป็นที่ปรารถนาในสถานะ
นอกจากนี้ คุณสามารถรับข้อมูลต่อไปนี้:
- เกี่ยวกับการตรวจสอบใบรับรองว่าไซต์ได้ยืนยันความถูกต้องด้วยใบรับรอง TLS หรือไม่
- การเชื่อมต่อ TLS ระบุว่าไซต์ของคุณใช้โปรโตคอลความปลอดภัยที่ทันสมัยหรือไม่
- ความปลอดภัยของแหล่งข้อมูลรองที่โหลด
ที่จริงแล้ว เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (คอนโซลในเบราว์เซอร์ Chrome) เป็นสิ่งที่มีประโยชน์มากซึ่งมักจะมีประโยชน์สำหรับเราผู้ทดสอบ มากไปกว่านั้น ข้อมูลที่เป็นประโยชน์บนเว็บไซต์ https://developers.google.com/web/tools/chrome-devtools/
หากการประเมินประสิทธิภาพของเนื้อหาบนหน้าแอปในร้านค้าเป็นป่ามืดสำหรับคุณ โปรดใส่ใจ Google Play คอนโซลนักพัฒนา- ฉันจะบอกวิธีทำงานกับเครื่องมือนี้
คอนโซลนักพัฒนาซอฟต์แวร์ Google Play คืออะไร
เมื่อไฟล์ APK ของแอปพลิเคชันของคุณพร้อมแล้ว คุณจะต้องเพิ่มลงในร้านค้า แอปพลิเคชันของ Googleเล่น.
จำนวนผู้ใช้ใหม่ไม่เท่ากับจำนวนการติดตั้งในช่วงเวลาเดียวกัน
รายงานมีสองเกณฑ์: ข้อมูลตามแหล่งที่มาของการเข้าชมและข้อมูลตามประเทศ คุณสามารถสร้างรายงานเป็นวัน สัปดาห์ หรือเดือนได้ แต่คุณไม่สามารถเลือกช่วงเวลาได้ตามใจชอบ
รายงานจะถูกนำเสนอในรูปแบบของช่องทาง
- ผู้เยี่ยมชมหน้าแอปในร้านค้าที่ไม่ซ้ำ
- จำนวนผู้ใช้ที่ติดตั้งแอปพลิเคชันหลังจากดู
- จำนวนผู้ซื้อ.
- ลูกค้าทำซ้ำ.
ข้อมูลถูกสร้างขึ้นในรูปแบบของกลุ่มประชากรตามรุ่น กล่าวคือ รายงานสำหรับช่วงเวลาที่เลือกจะรวมเฉพาะผู้ใช้ที่เข้าชมเพจและติดตั้งแอปพลิเคชันในช่วงเวลานี้ การวิเคราะห์ตามรุ่นคืออะไร และเหตุใดจึงมีความสำคัญ วิจัยการตลาด, พวกเราเขียน.
ดัชนี ร้านขายของเล่น- นี่คือผลลัพธ์ของ ASO ของคุณ ซึ่งก็คือผลลัพธ์ของการเพิ่มประสิทธิภาพเพจและการจัดทำดัชนีใน App Store
โดยพื้นฐานแล้ว ผู้ใช้เหล่านี้คือผู้ใช้ที่ไม่ซ้ำซึ่งมาถึงหน้าแอปของคุณอันเป็นผลมาจากการค้นหาหรือเรียกดูแอปใน Play Store
3. ส่วน “การให้คะแนนและบทวิจารณ์”
ส่วนย่อย "การให้คะแนน" เป็นรายงานที่ช่วยให้คุณเห็นการเปลี่ยนแปลงของการให้คะแนนตามวัน สัปดาห์ เดือน และประเมินว่าผู้ใช้รับรู้การใช้งานคุณลักษณะใหม่อย่างไร
“บทวิจารณ์” เป็นช่องสำหรับกิจกรรมของผู้จัดการชื่อเสียง ผู้เชี่ยวชาญ SMM หรือบุคคลอื่นใดที่รับผิดชอบในการสื่อสารกับผู้ใช้ที่เขียนคำขอ/ข้อร้องเรียนถึงคุณในบทวิจารณ์ในร้านค้า
ในส่วนนี้ ระบบกูเกิล Play Developers Console ขอให้คุณทำอะไรบางอย่างโดยสมัครใจและบังคับ และแสดงสิ่งที่คุณได้ทำไปแล้ว ตัวอย่างเช่น เพิ่มภาพหน้าจอสำหรับแท็บเล็ตหากแอปพลิเคชันของคุณรองรับอุปกรณ์ดังกล่าว
5. ส่วน “ข้อมูลสำหรับ Google Play”
ส่วนนี้เป็นส่วนเสริมรายงานก่อนหน้านี้เนื่องจากแสดงสิ่งที่แสดงบนหน้าร้าน - ภาษา คำอธิบายสั้น, คำอธิบายแบบเต็ม, ไอคอน, วัสดุกราฟิก
บน หน้ากูเกิลเล่นขอแนะนำอย่างยิ่งให้เพิ่มวิดีโอส่งเสริมการขายเนื่องจากจะส่งผลต่อความน่าดึงดูดใจของเพจของคุณสำหรับร้านค้าและผู้ใช้
ข้อสรุป
Google Play Developers Console - เครื่องมือที่สามารถและควรใช้สำหรับการตลาด แอปพลิเคชันมือถือ- เมื่อคุณเข้าใจแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Play แล้ว คุณจะเข้าใจ:
- ร้านค้ารับรู้ใบสมัครของคุณอย่างไร
- ร้านค้าแสดงประสิทธิภาพของเนื้อหาของคุณในหน้าแอปพลิเคชันอย่างไร
โดยพื้นฐานแล้วมันเป็นจุดเชื่อมโยงที่สำคัญระหว่างผู้พัฒนาผลิตภัณฑ์และผู้ใช้
ภาพประกอบแรกเป็นภาพถ่ายของ Freddy Fabris จากโปรเจ็กต์ "The Renaissance Series"
- การแปล
วิธีใช้คอนโซลนักพัฒนาซอฟต์แวร์เพื่อเปิด Google Chromeในความคล้ายคลึงกัน โปรแกรมแก้ไขข้อความ- ไอคอนที่หลายๆ คนคุ้นเคยจาก jQuery มีความหมายว่าอะไร $ - ฉันจะแสดงชุดของค่าในคอนโซลที่จัดรูปแบบเป็นตารางที่เหมาะสมได้อย่างไร หากคำตอบสำหรับคำถามเหล่านี้ไม่อยู่ในใจทันที ให้ไปที่แท็บ คอนโซลของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ยังไม่ได้เปิดเผยตัวเองให้คุณเห็นในความรุ่งโรจน์ของมัน
เมื่อมองแวบแรก เรามีคอนโซล JavaScript ธรรมดาก่อนหน้าเรา ซึ่งเหมาะสำหรับการแสดงบันทึกการตอบกลับของเซิร์ฟเวอร์หรือค่าตัวแปรเท่านั้น อย่างไรก็ตาม นั่นคือวิธีที่ฉันใช้มันเมื่อเริ่มเขียนโปรแกรมครั้งแรก อย่างไรก็ตาม เมื่อเวลาผ่านไป ฉันได้รับประสบการณ์ เรียนรู้เพิ่มขึ้นอีกเล็กน้อย และค้นพบโดยไม่คาดคิดว่าคอนโซล Chrome สามารถทำสิ่งต่างๆ มากมายที่ฉันไม่รู้มาก่อน ฉันอยากจะพูดเกี่ยวกับเรื่องนี้ในวันนี้ ใช่ หากคุณไม่ได้อ่านหนังสือบนโทรศัพท์มือถือตอนนี้ คุณสามารถลองทั้งหมดนี้ได้ทันที
1. การเลือกองค์ประกอบ DOM
หากคุณคุ้นเคยกับ jQuery ฉันก็ไม่ควรบอกคุณเกี่ยวกับความสำคัญของโครงสร้างเช่น $('.คลาส')และ $('รหัส')- สำหรับผู้ที่ไม่ทราบ พวกเขาอนุญาตให้คุณเลือกองค์ประกอบ DOM โดยการระบุคลาสและตัวระบุที่กำหนดให้กับองค์ประกอบเหล่านั้น คอนโซลนักพัฒนาซอฟต์แวร์มีฟังก์ชันการทำงานที่คล้ายกัน อย่างไรก็ตาม “$” ที่นี่ไม่มีส่วนเกี่ยวข้องกับ jQuery แม้ว่าโดยพื้นฐานแล้วมันจะทำสิ่งเดียวกันก็ตาม นี่คือนามแฝงสำหรับฟังก์ชัน เอกสาร.querySelector().คำสั่งของแบบฟอร์ม $('ชื่อแท็ก'), $('.คลาส'), $('#id')และ $('.class #id')ส่งคืนองค์ประกอบ DOM แรกที่ตรงกับตัวเลือก นอกจากนี้ หาก jQuery มีอยู่ในเอกสาร “$” จะถูกแทนที่โดยฟังก์ชันคอนโซลนี้
มีการออกแบบอื่นที่นี่: $$ - ลักษณะการใช้งานมันประมาณนี้ $$('ชื่อแท็ก')หรือ $$('.คลาส')- ช่วยให้คุณสามารถเลือกองค์ประกอบ DOM ทั้งหมดที่ตรงกับตัวเลือกและวางไว้ในอาร์เรย์ การทำงานกับมันไม่แตกต่างจากอาร์เรย์อื่นๆ หากต้องการเลือกองค์ประกอบเฉพาะ คุณสามารถเข้าถึงได้โดยใช้ดัชนี
เช่น คำสั่ง $$('.className')จะให้อาร์เรย์ขององค์ประกอบของหน้าทั้งหมดแก่เราพร้อมชื่อคลาสที่ระบุเมื่อเรียกใช้ ทีม $$('.className')และ $$('.className') จะให้สิทธิ์การเข้าถึงองค์ประกอบที่หนึ่งและที่สองของอาร์เรย์ผลลัพธ์ตามลำดับ
การทดลองใช้คำสั่ง $
และ $$
2. เปลี่ยนเบราว์เซอร์ให้เป็นโปรแกรมแก้ไขข้อความ
คุณเคยพบว่าตัวเองคิดว่าเป็นการดีที่จะแก้ไขข้อความของหน้าเว็บที่คุณกำลังดีบั๊กในเบราว์เซอร์โดยตรงหรือไม่? ถ้าใช่ คุณจะต้องชอบคำสั่งที่แสดงด้านล่างDocument.body.contentEditable=true
หลังจากดำเนินการในคอนโซล เอกสารที่เปิดในเบราว์เซอร์จะสามารถแก้ไขได้โดยไม่จำเป็นต้องค้นหา ส่วนที่ต้องการในโค้ด HTML
3. ค้นหาตัวจัดการเหตุการณ์ที่เชื่อมโยงกับองค์ประกอบ
ในระหว่างการดีบัก คุณอาจต้องค้นหาตัวจัดการเหตุการณ์ที่ถูกผูกไว้กับองค์ประกอบ นี่เป็นเรื่องง่ายมากที่จะทำโดยใช้คอนโซล สิ่งที่คุณต้องทำคือใช้คำสั่งนี้:GetEventListeners($('ตัวเลือก'))
จากผลของการดำเนินการ อาร์เรย์ของอ็อบเจ็กต์จะถูกสร้างขึ้นโดยมีรายการเหตุการณ์ที่องค์ประกอบสามารถตอบสนองได้
ตัวจัดการเหตุการณ์
เพื่อค้นหาตัวจัดการสำหรับเหตุการณ์เฉพาะ คุณสามารถใช้โครงสร้างต่อไปนี้:
GetEventListeners($('ตัวเลือก')).eventName.listener
คำสั่งนี้จะพิมพ์โค้ดฟังก์ชันตัวจัดการเหตุการณ์ ที่นี่ ชื่อเหตุการณ์เป็นอาร์เรย์ที่รวบรวมเหตุการณ์ทั้งหมด ประเภทเฉพาะ- ตัวอย่างเช่น ในทางปฏิบัติอาจมีลักษณะดังนี้:
GetEventListeners($('#firstName')).click.listener
เป็นผลให้เราจะได้รับโค้ดของฟังก์ชันที่เกี่ยวข้องกับเหตุการณ์ คลิกองค์ประกอบที่มีรหัส ชื่อจริง.
4. การติดตามเหตุการณ์
หากต้องการสังเกตการเกิดขึ้นของเหตุการณ์ที่เกี่ยวข้องด้วย องค์ประกอบเฉพาะ DOM คอนโซลจะช่วยในเรื่องนี้ ต่อไปนี้คือคำสั่งบางส่วนที่คุณสามารถใช้เพื่อติดตามเหตุการณ์- ทีม monitorEvents($('ตัวเลือก'))ช่วยให้คุณจัดระเบียบการตรวจสอบเหตุการณ์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบที่ตัวเลือกสอดคล้อง เมื่อมีเหตุการณ์เกิดขึ้น รายการจะถูกสร้างขึ้นในคอนโซล เช่น คำสั่ง monitorEvents($('#ชื่อ'))จะช่วยให้คุณสามารถบันทึกเหตุการณ์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบที่มีตัวระบุ ชื่อจริง.
- ทีม monitorEvents($('ตัวเลือก'),'ชื่อเหตุการณ์')คล้ายกับครั้งก่อน แต่มุ่งเป้าไปที่เหตุการณ์เฉพาะ ที่นี่ นอกเหนือจากตัวเลือกองค์ประกอบแล้ว ชื่อเหตุการณ์ยังถูกส่งผ่านไปยังฟังก์ชันอีกด้วย คำสั่งนี้จะช่วยให้คุณสามารถแสดงข้อมูลเกี่ยวกับการเกิดขึ้นของเหตุการณ์หนึ่งไปยังคอนโซลได้ เช่น คำสั่ง monitorEvents($('#firstName'),'คลิก')จะแสดงเฉพาะข้อมูลภายในงานเท่านั้น คลิกองค์ประกอบที่มีรหัส ชื่อจริง.
- ทีม monitorEvents($('ตัวเลือก'),['eventName1','eventName3",....])ช่วยให้คุณสามารถติดตามเหตุการณ์ที่เลือกได้หลายรายการ ที่นี่อาร์เรย์สตริงจะถูกส่งผ่านไปยังฟังก์ชันซึ่งมีชื่อของเหตุการณ์ ตัวอย่างเช่น คำสั่งนี้: monitorEvents($('#firstName'),['คลิก','โฟกัส'])จะส่งออกข้อมูลเหตุการณ์ไปยังคอนโซล คลิกและ จุดสนใจสำหรับองค์ประกอบที่มีรหัส ชื่อจริง.
- ทีม unmonitorEvents($('ตัวเลือก'))ช่วยให้คุณหยุดการตรวจสอบและบันทึกเหตุการณ์ในคอนโซล
5. การวัดเวลาดำเนินการของส่วนของโค้ด
ฟังก์ชั่นมุมมองมีอยู่ในคอนโซล Chrome console.time('ชื่อฉลาก')ซึ่งใช้ป้ายกำกับเป็นอาร์กิวเมนต์และเริ่มจับเวลา อีกหนึ่งฟังก์ชั่น console.timeEnd('ชื่อฉลาก')หยุดตัวจับเวลาที่กำหนดป้ายกำกับที่ส่งผ่านไปให้ นี่คือตัวอย่างการใช้ฟังก์ชันเหล่านี้:Console.time("myTime"); //เริ่มจับเวลาที่มีป้ายกำกับ myTime console.timeEnd("myTime"); //หยุดตัวจับเวลาที่มีป้ายกำกับ myTime //Output: myTime:123.00 ms
ตัวอย่างข้างต้นช่วยให้คุณทราบเวลาระหว่างการเริ่มและการหยุดเครื่องจับเวลา คุณสามารถทำสิ่งเดียวกันภายในโปรแกรม JavaScript และค้นหาเวลาดำเนินการของโค้ดได้
สมมติว่าฉันต้องรู้ระยะเวลาของการวนซ้ำ คุณสามารถทำได้เช่นนี้:
Console.time("myTime"); // เริ่มจับเวลาชื่อ myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms
6. การแสดงค่าตัวแปรในรูปแบบตาราง
สมมติว่าเรามีอาร์เรย์ของวัตถุดังนี้:ตัวแปร myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,ข:2,ค:3)]
หากคุณแสดงในคอนโซลมันจะเปิดออกมา โครงสร้างลำดับชั้นจริงๆ แล้วในรูปแบบของอาร์เรย์ของวัตถุ นี้ - โอกาสที่เป็นประโยชน์สามารถขยายกิ่งก้านของโครงสร้างได้โดยการดูเนื้อหาของออบเจ็กต์ อย่างไรก็ตาม ด้วยวิธีนี้ เป็นการยากที่จะเข้าใจ เช่น คุณสมบัติขององค์ประกอบที่คล้ายคลึงกันเกี่ยวข้องกันอย่างไร เพื่อให้สะดวกยิ่งขึ้นในการทำงานกับข้อมูลดังกล่าวสามารถแปลงเป็นได้ มุมมองแบบตาราง- เมื่อต้องการทำเช่นนี้ ใช้คำสั่งต่อไปนี้:
Console.table (ชื่อตัวแปร)
ช่วยให้คุณสามารถแสดงตัวแปรและคุณสมบัติทั้งหมดในรูปแบบของตาราง นี่คือสิ่งที่ดูเหมือน
การแสดงอาร์เรย์ของวัตถุเป็นตาราง
7. ดูรหัสองค์ประกอบ
คุณสามารถเข้าถึงโค้ดองค์ประกอบได้อย่างรวดเร็วจากคอนโซลโดยใช้คำสั่งต่อไปนี้:- ทีม ตรวจสอบ($('ตัวเลือก'))ช่วยให้คุณสามารถเปิดรหัสขององค์ประกอบที่สอดคล้องกับตัวเลือกในแผงควบคุม องค์ประกอบเครื่องมือ นักพัฒนาซอฟต์แวร์ของ Googleโครเมียม. เช่น คำสั่ง ตรวจสอบ($('#ชื่อ'))จะช่วยให้คุณสามารถดูโค้ดขององค์ประกอบด้วยตัวระบุ ชื่อจริง- ทีม ตรวจสอบ($$('a'))จะเปิดรหัสสำหรับลิงค์ที่สี่ที่มีอยู่ใน DOM
- คำสั่งของแบบฟอร์ม $0 , $1 , $2 ช่วยให้คุณนำทางไปยังรายการที่ดูล่าสุดได้อย่างรวดเร็ว ตัวอย่างเช่น, $0 จะเปิดโค้ดขององค์ประกอบที่ดูล่าสุดเป็นต้น
8. การแสดงรายการคุณสมบัติขององค์ประกอบ
หากคุณต้องการดูรายการคุณสมบัติขององค์ประกอบ คอนโซลก็ช่วยได้เช่นกัน คำสั่งต่อไปนี้ใช้ที่นี่:Dir($('ตัวเลือก'))
มันส่งคืนวัตถุที่มีคุณสมบัติที่เกี่ยวข้องกับการกำหนด องค์ประกอบ DOM- เช่นเดียวกับกรณีอื่นๆ ที่คล้ายคลึงกัน เนื้อหาของวัตถุนี้สามารถตรวจสอบได้โดยการดูโครงสร้างแบบต้นไม้
9. การเรียกผลลัพธ์สุดท้ายที่ได้รับ
คอนโซลสามารถใช้เป็นเครื่องคิดเลขได้อย่างที่ทุกคนคงรู้ แต่มีเพียงไม่กี่คนที่รู้ว่ามันมีเครื่องมือในตัวที่ให้คุณใช้ผลลัพธ์ของการคำนวณก่อนหน้าในคำสั่งได้ โดยการออกแบบ $_ คุณสามารถดึงผลลัพธ์ของนิพจน์ก่อนหน้าจากหน่วยความจำได้ นี่คือสิ่งที่ดูเหมือน:2+3+4 9 //- ผลลัพธ์ของการรวมคือ 9 $_ 9 // ผลลัพธ์สุดท้ายที่ได้รับจะแสดง $_ * $_ 81 // เนื่องจากผลลัพธ์สุดท้ายคือ 9 เราจึงได้ 81 Math.sqrt($ _) 9 // รากที่สองจากผลลัพธ์สุดท้ายซึ่งก็คือ 81 $_ 9 // อีกครั้งเราได้ 9 - ผลลัพธ์ การคำนวณก่อนหน้า
10. ทำความสะอาดคอนโซลและหน่วยความจำ
หากคุณต้องการล้างคอนโซลและหน่วยความจำ ให้ใช้คำสั่งง่ายๆ นี้:ชัดเจน()
หลังจากกด Enter คอนโซลที่สะอาดจะพร้อมสำหรับการทดลองใหม่
นั่นคือทั้งหมดที่
