คำถามติดแท็ก web-inspector

ฉันกำลังพัฒนาเว็บไซต์และจำเป็นต้องทำงานในมุมมองการพิมพ์ โดยทั่วไปเมื่อฉันมีปัญหาการจัดวางฉันใช้ตัวตรวจสอบองค์ประกอบของ Chrome อย่างไรก็ตามสิ่งนี้ไม่มีอยู่ในโหมดดูตัวอย่างก่อนพิมพ์ มีปลั๊กอินของ Chrome หรือวิธีอื่นในการเปลี่ยนสื่อการรับชมของคุณภายในโครเมี่ยมเองเพื่อดูหน้าเว็บที่เครื่องพิมพ์จะทำอย่างไร ฉันคิดว่ามันไม่ได้เป็นโซลูชันเฉพาะของ Chrome แต่นั่นเป็นเบราว์เซอร์หลักของฉันดังนั้นจึงเป็นการดีที่มีโซลูชันในเบราว์เซอร์ ตอนนี้ฉันมุ่งเน้นไปที่สื่อตัวอย่างก่อนพิมพ์ แต่มันจะเหมาะที่จะเปลี่ยนเป็นสื่อประเภทใดก็ได้ที่รองรับ (เช่นทั้งหมด / อักษรเบรลล์ / นูน / มือถือ / พิมพ์ / การฉาย / หน้าจอ / คำพูด / tty / โทรทัศน์).

666 google-chrome  google-chrome-devtools  web-inspector  print-preview 

เมื่อดูข้อมูลเกี่ยวกับสไตล์ชีทในแท็บเครือข่ายของเครื่องมือ dev ของ Chrome หนึ่งคอลัมน์จะระบุทั้ง "ขนาด" และ "เนื้อหา": ใครสามารถแยกความแตกต่างระหว่างตัวเลขทั้งสองนี้ได้หรือไม่? ในบางหน้าตัวเลขจะใกล้เคียงกันและบางหน้าก็มีความแตกต่างกันในจำนวนที่มากพอสมควร

254 google-chrome  web-inspector 

เมื่อไม่นานมานี้ฉันกำลังทำงานกับสไตล์การพิมพ์สำหรับเว็บไซต์และฉันรู้ว่าฉันกำลังสูญเสียวิธีที่มีประสิทธิภาพในการปรับแต่ง เป็นสิ่งหนึ่งที่ต้องมีวงจรการรีโหลดสำหรับการทำงานบนเค้าโครงบนหน้าจอ: เปลี่ยนรหัส คำสั่งแท็บ โหลด แต่กระบวนการทั้งหมดนั้นจะยากลำบากกว่าเดิมเมื่อคุณพยายามพิมพ์: เปลี่ยนรหัส คำสั่งแท็บ โหลด พิมพ์ เหล่ที่รูปภาพตัวอย่างก่อนพิมพ์ เปิด PDF ในหน้าตัวอย่างเพื่อตรวจสอบเพิ่มเติม มีเครื่องมือที่ฉันขาดหายไปที่นี่? ผู้ตรวจสอบของ WebKit มีช่องทำเครื่องหมาย "แกล้งเป็นสื่อเพจ" หรือไม่ มีเวทมนต์ที่ Firebug ( ตัวสั่น ) ทำอะไรได้บ้าง?

238 css  printing  firebug  google-chrome-devtools  web-inspector 

ฉันสร้างIonicapp ที่ใช้es6 modules, TypeScriptและSystemJSเป็นรถตักดินแบบโมดูล นี่คือการตั้งค่าของฉัน: tsconfig.json: { "compilerOptions": { ... "target": "es5", "module": "system", ... } } index.html: <script src="lib/system.js"></script> <script src="systemjs.config.js"></script> <script>System.import('js/app.js')</script> ตัวอย่างสคริปต์ (TypeScript): import {IConfig} from "./app-config"; export class ConfigLoader { ... } ทุกอย่างทำงานได้ดีใน Chrome อย่างไรก็ตามเมื่อทำการดีบักโดยใช้ Web Inspector ของ Safari ฉันไม่สามารถวางเบรกพอยต์ในสคริปต์ได้เนื่องจาก Web Inspector แสดงเฉพาะสคริปต์ที่โหลดโดยตรงจาก HTML (ผ่านแท็กสคริปต์) ไม่ใช่สคริปต์ที่โหลดโดย XHR …

120 javascript  safari  ecmascript-6  systemjs  web-inspector 

เมื่อฉันทำงานกับ CSS ฉันมักจะทดสอบในเบราว์เซอร์เช่น Chrome คลิกขวาที่องค์ประกอบคลิกตรวจสอบองค์ประกอบและแก้ไข CSS ที่นั่น การใช้ปุ่มลูกศรเพื่อเปลี่ยนสิ่งต่างๆเช่นระยะขอบและช่องว่างภายในทำให้การจัดเรียงสิ่งต่างๆทำได้ง่ายมาก ไม่ใช่เรื่องยากเกินไปที่จะนำการเปลี่ยนแปลงเหล่านั้นไปใช้กับไฟล์ CSS แต่มันจะดีมากถ้าฉันสามารถคลิกขวาที่ตัวเลือกในตัวตรวจสอบแล้วเลือก "ส่งออก" หรือ "คัดลอก" และมีเนื้อหาอยู่ใน คลิปบอร์ด สิ่งนี้มีอยู่จริงหรือไม่?

104 css  webkit  google-chrome-extension  web-inspector 

การใช้ Chromes Web Inspector เพื่อดูโค้ดมีประโยชน์มาก แต่คุณจะดูตัวอย่างรหัสโฮเวอร์ของปุ่มได้อย่างไร? คุณจะต้องวางเมาส์เหนือปุ่มจึงไม่สามารถใช้ (เมาส์) ในตัวตรวจสอบได้ มีทางลัดหรือวิธีอื่น ๆ ในการดำเนินการนี้ในผู้ตรวจสอบหรือไม่?

99 css  google-chrome  google-chrome-devtools  web-inspector 

หลังจากอัปเกรดเป็น Xcode 11.3.1 ฉันมีปัญหาในการใช้ตัวตรวจสอบเว็บ Safari ด้วยเครื่องมือจำลอง iOS 12.1 ทุกครั้งที่ฉันเรียกใช้แอพภายในอุปกรณ์จำลอง iOS 12.1 มันจะปรากฏในเมนูแก้จุดบกพร่อง Safari และอนุญาตให้ฉันเชื่อมต่อกับมัน แต่แท็บเดียวที่ฉันจะเห็นคือแหล่งที่มาคอนโซลและการตรวจสอบ นี่คือภาพหน้าจอของผู้ตรวจสอบที่แนบมากับอินสแตนซ์ของเบราว์เซอร์ Safari ภายในตัวจำลอง มีวิธีแก้ไขปัญหานี้หรือไม่? สิ่งแวดล้อม: MacOS 10.14.6 (18G95) Xcode 11.3.1 Safari 13.1 (14609.1.20.111.8) เวอร์ชั่น Simulator 11.3.1 (SimulatorApp-912.5.1 SimulatorKit-570.3 CoreSimulator-681.17.2)

14 ios  xcode  ios-simulator  web-inspector  safari-web-inspector